new Vue({
    el: '[data-search-box-block]',
    data: {
        searchStr: '',
        searchUrl: 'javascript:void(0);',
        products: [],
        productsTotal: 0,
        isSearching: false
    },
    mounted: function () {
        initSearchBox();
    },
    methods: {
        search: function () {
            var self = this;

            if (self.searchStr.length >= 3) {
                self.isSearching = true;

                $.ajax({
                    url: '/search-box/search',
                    type: 'POST',
                    data: {
                        language: GNS.language,
                        user_location_id: GNS.userLocationId,
                        user_shop_id: GNS.userShopId,
                        user_delivery_address: GNS.userDeliveryAddress,

                        search_query: self.searchStr.replace(/(\s\s+|\s+)/g, '+').toLocaleLowerCase()
                    },
                    success: function (data) {
                        if (data.productsTotal > 0) {
                            self.searchUrl = data.searchUrl;
                            self.products = data.products;
                            self.productsTotal = data.productsTotal;
                        } else if (self.productsTotal > 0) {
                            self.productsTotal = 0;
                            self.products.length = 0;
                            self.searchUrl = 'javascript:void(0);';
                        }

                        self.isSearching = false;

                        if (GNS.isDebug) {
                            console.log('/search-box/search[success]: ', data);
                        }
                    },
                    error: function (error) {
                        self.isSearching = false;

                        if (GNS.isDebug) {
                            console.log('/search-box/search[error]: ', error);
                        }
                    }
                });
            } else if (self.productsTotal > 0) {
                self.productsTotal = 0;
                self.products.length = 0;
                self.searchUrl = 'javascript:void(0);';
            }
        },
        goToSearchPage: function () {
            if (!this.isSearching && this.productsTotal > this.products.length) {
                window.location.href = this.searchUrl;
            }
        }
    }
});
// ---------------------------------------------------------------------------------------------------------------------

function initSearchBox() {
    var searchOpen = false,
        body = $("body"),
        html = $("html"),
        searchBlock = $("[data-search-block]"),
        searchContainer = $("[data-search-container]"),
        containerLeft = searchContainer.offset().left,
        //containerWidth = searchContainer.outerWidth(),
        searchBg = $("[data-search-bg]");

    var openSearch = function() {
        searchBg.stop(true, true).fadeIn(300);

        if($(window).outerWidth() <= 575){
            searchBlock.css({
                "left": 0,
                "right": 0
            });
        } else if($(window).outerWidth() <= 991){
            searchBlock.css({
                "padding-left": containerLeft,
                "padding-right": containerLeft
            });
        } else {
            searchBlock.css({
                "padding-left": containerLeft,
                "padding-right": containerLeft + 17
            });
        }

        searchBlock.addClass("active");
        searchBlock.find("input").focus();
        searchOpen = true;

        if($(window).width() <= 991){
            body.addClass("modal-open");
            html.addClass("modal-open");
        } else {
            body.addClass("modal-open").css("padding-right", "17px");
            html.addClass("modal-open");
        }
    },
    closeSearch = function() {
        searchBg.stop(true, true).fadeOut(300);
        searchBlock.removeClass("active");

        setTimeout(function(){
            searchBlock.removeAttr("style").stop(true, true);
        });

        searchOpen = false;

        body.removeClass("modal-open").removeAttr("style", "padding-right");
        html.removeClass("modal-open");
    };

    // search
    body.on("click", "[data-search-open]", function(){
        openSearch();
    });

    body.on("click", "[data-search-close]", function(){
        closeSearch();
    });
    // search END
}