/*!
 * fst popup search
 * http://fanseethemes.com/
 *
 * Copyright (c) fanseethemes
 *
 * License: GPL
 * https://www.gnu.org/licenses/gpl-3.0.html
 */

(function($){
    'use strick';
    
    if($){

        var prefix = 'fst-popup-search';

        var icons = {
            enterIcon  : '<?xml version="1.0" encoding="utf-8"?>\
                        <svg version="1.1" width="25" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
                            viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">\
                        <path d="M1,74.23l32.55-24.28l0.17,16.18c0,0,36.27-0.09,39.97-0.09c8.04,0.01,8.82-3.34,8.96-8.52c0.02-0.82,0.04-56.76,0.04-56.76\
                            H99l-0.05,63.36c0.69,11.67-5.07,17.48-16.38,18.24l-48.9,0v16.61L1,74.23z"/>\
                        </svg',
            clearIcon : '<?xml version="1.0" encoding="utf-8"?>\
                        <!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\
                        <svg version="1.1" width="18"  id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
                            viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">\
                        <path d="M26.46,56.04C25.28,72.65,17.23,86.61,7.19,99.2h24.96c4.81-4.61,7.86-10.71,9.38-17.17c0.59,6.74-0.94,12.46-4.32,17.17\
                            l21.38-0.11c2.54-2.26,4.31-4.75,5.17-7.53c0.27,2.77-0.69,5.43-2.42,7.64l15.56-0.11c10.71-0.44,13.51-10.34,14.4-28.8V56.04H26.46\
                            z"/>\
                        <path d="M26.74,52.34l64.56-0.07l-0.5-17.24c-0.42-3.14-1.84-5.87-6.34-6.43l-18.36,0.04l1.87-20.68\
                            C67.27-0.28,54.33-2.1,52.35,7.42L52.3,28.59l-16.52-0.01c-4.3,0.31-6.65,2.94-7.11,6.7L26.74,52.34z"/>\
                        </svg>',
            closeIcon: '<svg version="1.1" width="18" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285L284.286,256.002z"></path></svg>'
        };

        var classNames = {
            wrapper  : prefix+'-wrapper',
            firstTab : prefix+'-first-tabindex',
            lastTab  : prefix+'-last-tabindex', 
            close    : prefix+'-close', 
            clear    : prefix+'-clear',
            form     : prefix+'-form',
            label    : prefix+'-label',
            overlay  : prefix+'-overlay',
            btnSubmit: prefix+'-submit',
            btnWrapper: prefix+'-btns',
            active    : prefix+'-active',
        };

        var TXT = { 
            placeholderText : 'Search...', 
            labelText: 'What are you looking for?', 
            elementNotExit: 'provided element not exist on DOM',
        }; 

        var defaultOptions = {
            action: '',
            method: 'get',
            closeIcon: icons.closeIcon,
            clearIcon: icons.clearIcon,
            enterIcon: icons.enterIcon, 
            placeholderText: TXT.placeholderText ,
            labelText: TXT.labelText 
        };
       

        /******************************
         *  Main function
          ******************************/
        $.fn.fstPopupSearch = function( options ){

            //Ensure that provided element is exist on DOM
            if(0 === $(this).length ){
                console.info(TXT.elementNotExist);
                return this;
            };

            // Ensure that provided only one fst popup search exist
            if (!$.data(document.body, prefix)) {
                $.data(document.body, prefix, true);
                $.fn.fstPopupSearch.settings = $.extend( {}, defaultOptions, options);
                $.fn.fstPopupSearch.init(this);
            };

        };


        /******************************
         * Initialize the plugin
         ******************************/
        $.fn.fstPopupSearch.init = function(ele){

            var settings = this.settings;
            var $body = $('body');
          
            appendSearchForm();
            listenClickEvent();
            listenEscKey();
            this.enableAccessibility();

            /**
             * Generate search pop form template
             * @returns {strings} 
             */
            function getSearchFormTemplate(settings){

                var labelText = settings.labelText ? '<h3>'+settings.labelText+'</h3>' : '';
                
                return '<div class="'+classNames.wrapper+'">\
                            <span class="'+classNames.firstTab+'" tabindex="0"></span>\
                            <button class="'+classNames.close+'">'+icons.closeIcon+'</button>\
                            '+labelText+'\
                            <form role="search" method="'+settings.method+'" class="'+classNames.form+'" action="'+settings.action+'">\
                                <input type="text" class="fst-search-field" placeholder="'+settings.placeholderText+'" value="" name="s" />\
                                <div class="'+classNames.btnWrapper+'">\
                                    <div><a href="#" title="Clear search text" class="'+classNames.clear+'">'+icons.clearIcon+'</a></div>\
                                    <button type="submit" title="Search" class="'+classNames.btnSubmit+'">'+icons.enterIcon+'</button>\
                                </div>\
                            </form>\
                            <span class="'+classNames.lastTab+'" tabindex="0"></span>\
                        </div>';
            };

            /**  
             * Append search form on DOM 
             * @returns {void}
             */
            function appendSearchForm(){

                var templateSettings = {
                    action: settings.action,
                    method: settings.method,
                    placeholderText: settings.placeholderText,
                    labelText: settings.labelText
                }

                var template = getSearchFormTemplate(templateSettings); 

                !$(`.${classNames.wrapper}`).length && $body.append(template);  
            };

            /** 
             * Check search is open or not
             * @returns {boolean}
             */
            function isSearchOpen(){
                return $('body').hasClass(classNames.active);
            };

            /**
             * Focus on search input
             * @returns {void}
             */
            function focusOnSearch(){
                setTimeout(function(){
                    $(`.${classNames.wrapper} input`).focus();
                }, 500)
            };

            /** 
             * Open the popup search
             * @retuns {void}
             */
            function openSearch(){
                $body.addClass(classNames.active);
                focusOnSearch();
            }
            
            /** 
             * Focus search opener button
             * @returns {void}
             */
            function focusBtnSearchOpener(){
                $(ele).focus();
            };

            /** 
             * Close the popup search
             * @return {void}
             */
            function closeSearch (){
                $body.removeClass(classNames.active);
                focusBtnSearchOpener();
            }

            /** 
             * Clear input
             * @returns {void}
             */
            function clearInput(){
                isSearchOpen() &&  $(`.${classNames.wrapper} input`).val('');
            };

            /** 
             * Close popup search on press esc key
             * @returns {void}
             */
            function listenEscKey(){
                $(document).on('keydown', function(e){
                    if(27 === e.keyCode)
                        closeSearch();
                })
            }

            /** 
             * Listen click events 
             * @return {void}
             */
            function listenClickEvent(){
                $(ele).on('click', openSearch);
                $(`.${classNames.close}`).on('click', closeSearch);
                $(`.${classNames.clear}`).on('click', function(e){
                    e.preventDefault();
                    clearInput();
                });
            };

        };



        /****************************** 
         * Accessibility tab loop
         ******************************/
        $.fn.fstPopupSearch.enableAccessibility = function(){

            $(document).on('focus', '.'+classNames.firstTab, function(e){
                $(e.target).parents('.'+classNames.wrapper).find(`.${classNames.btnSubmit}`).focus();
            });
            
            $(document).on('focus', '.'+classNames.lastTab, function(e){
                $(e.target).parents('.'+classNames.wrapper).find(`.${classNames.close}`).focus();
            });
        };


    };

})(window.jQuery || window.$);