$.extend({
    getUrlVars: function () {
        if (!/[?&]/.test(window.location.search)) {
            return [];
        }
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        return $.getUrlVars()[name];
    }
});

$(document).ready(function () {
    var pageSize = 30;
    if ($.getUrlVar('pageSize')) {
        pageSize = parseInt($.getUrlVar('pageSize'));
        $('#pageSize').val(pageSize).trigger('change');
    }

    $('#pageSize').change(function () {
        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        urlVars.pageSize = $(this).val();
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    var filter = '';
    var keyword = '';
    if ($.getUrlVar('keyword')) {
        keyword = decodeURIComponent($.getUrlVar('keyword').replace(/\+/g, '%20'));
        $('#keyword').val(keyword);
    }
    var arrFilterCategories = [],
        arrFilterColors = [],
        minPriceFilter = 0,
        maxPriceFilter = 0;
    if ($.getUrlVar('shopby')) {
        filter = decodeURIComponent($.getUrlVar('shopby'));
        var arrFilter = filter.split('_');
        $.each(arrFilter, function (i, item) {
            var arrItemFilter = item.split('~');
            if (arrItemFilter[0] !== undefined &&
                arrItemFilter[1] !== undefined &&
                arrItemFilter[2] !== undefined
            ) {
                var keyFilter = arrItemFilter[0].toLowerCase();
                var typeFilter = arrItemFilter[1].toLowerCase();
                var valueFilter = arrItemFilter[2].split(',').map(v => v.toLowerCase());
                if (keyFilter == 'category') {
                    arrFilterCategories = valueFilter;
                } else if (keyFilter == 'color') {
                    arrFilterColors = valueFilter;
                } else if (keyFilter == 'price') {
                    if (typeFilter == 'gte' && valueFilter[0] >= 0) {
                        minPriceFilter = parseFloat(valueFilter[0]);
                    } else if (typeFilter == 'lte' && valueFilter[0] > 0) {
                        maxPriceFilter = parseFloat(valueFilter[0]);
                    }
                }
            }
        });
    }

    if (maxPriceFilter > 0) {
        var el = '#price-'+ minPriceFilter + '-' + maxPriceFilter.toString().replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&");
        $(el).prop('checked', true);
    } else if (minPriceFilter == 400 && maxPriceFilter == 0) {
        $('#price-'+ minPriceFilter).prop('checked', true);
    }

    // Get list filter
    var urlFilterApi = arrowConfig.apiUrl + 'api/v1/products/filters?companyId=' + arrowConfig.companyId;
    $.ajax({
        url: urlFilterApi,
        contentType: "application/json",
        dataType: 'json',
        beforeSend: function () {
            $("#loading").removeClass('hidden');
        },
        complete: function () {
            //$("#loading").addClass('hidden');
        },
        success: function (data) {
            // Get colors products
            if(data.colors) {
                html = '';
                $.each(data.colors, function (i, item) {
                    var id = item.toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '-');
                    var valueItem = item.toLowerCase().split(' ').join('+');
                    if (arrFilterColors.indexOf(valueItem) >= 0) {
                        html += '<li><input type="checkbox" class="checkbox" checked="checked" id="cl-'+ id +'""><label for="cl-'+ id + '">'+ item +'</li>';
                    } else {
                        html += '<li><input type="checkbox" class="checkbox" id="cl-'+ id +'""><label for="cl-'+ id + '">'+ item +'</li>';
                    }
                });
                $('#byColor').html(html);
            }
            // Get list categories
            if(data.categories) {
                html = '';
                $.each(data.categories, function (i, item) {
                    var id = item.toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '-');
                    var valueItem = item.toLowerCase().split(' ').join('+');
                    if (arrFilterCategories.indexOf(valueItem) >= 0) {
                        html += '<li><input type="checkbox" class="checkbox" checked="checked" id="c-' + id + '"><label for="c-' + id + '">' + item + '</label></li>';
                    } else {
                        html += '<li><input type="checkbox" class="checkbox" id="c-' + id + '"><label for="c-' + id + '">' + item + '</label></li>';
                        
                    }
                });
                $('#byCategory').html(html);
            }
        }
    });

    // Filter color click
    $(document).on('click', '#byColor .checkbox', function () {
        var filterLink = [];
        var filterLinkItem = '';

        if (arrFilterCategories.length) {
            filterLinkItem = 'category~containedin~' + arrFilterCategories.join();
            filterLink.push(filterLinkItem);
        }

        var color = $(this).next().text().toLowerCase();
        if (arrFilterColors.length) {
            if (this.checked) {
                arrFilterColors.push(color);
            } else {
                var index = arrFilterColors.indexOf(color);
                if (index !== -1) {
                    arrFilterColors.splice(index, 1);
                }
            }
        } else {
            arrFilterColors.push(color);
        }

        if (arrFilterColors.length) {
            filterLinkItem = 'color~containedin~' + arrFilterColors.join();
            filterLink.push(filterLinkItem);
        }

        if (minPriceFilter > 0) {
            filterLinkItem = 'price~gte~' + minPriceFilter;
            filterLink.push(filterLinkItem);
        }

        if (maxPriceFilter > 0) {
            filterLinkItem = 'price~lte~' + maxPriceFilter;
            filterLink.push(filterLinkItem);
        }

        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        if (filterLink.length) {
            urlVars.shopby = filterLink.join('_');
        } else {
            delete urlVars.shopby;
        }
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    // Filter category change
    $(document).on('change', '#byCategory .checkbox', function () {
        var filterLink = [];
        var filterLinkItem = '';
        var category = $(this).next().text().toLowerCase();
        if (arrFilterCategories.length) {
            if (this.checked) {
                arrFilterCategories.push(category);
            } else {
                var index = arrFilterCategories.indexOf(category);
                if (index !== -1) {
                    arrFilterCategories.splice(index, 1);
                }
            }
        } else {
            arrFilterCategories.push(category);
        }
        if (arrFilterCategories.length) {
            filterLinkItem = 'category~containedin~' + arrFilterCategories.join();
            filterLink.push(filterLinkItem);
        }

        if (arrFilterColors.length) {
            filterLinkItem = 'color~containedin~' + arrFilterColors.join();
            filterLink.push(filterLinkItem);
        }

        if (minPriceFilter > 0) {
            filterLinkItem = 'price~gte~' + minPriceFilter;
            filterLink.push(filterLinkItem);
        }

        if (maxPriceFilter > 0) {
            filterLinkItem = 'price~lte~' + maxPriceFilter;
            filterLink.push(filterLinkItem);
        }

        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        if (filterLink.length) {
            urlVars.shopby = filterLink.join('_');
        } else {
            delete urlVars.shopby;
        }
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    // Filter price change
    $(document).on('change', '#byPrice .checkbox', function () {
        var filterLink = [];
        var filterLinkItem = '';
        if (arrFilterCategories.length) {
            filterLinkItem = 'category~containedin~' + arrFilterCategories.join();
            filterLink.push(filterLinkItem);
        }

        if (arrFilterColors.length) {
            filterLinkItem = 'color~containedin~' + arrFilterColors.join();
            filterLink.push(filterLinkItem);
        }

        if (this.checked) {
            var id = $(this).attr('id');
            var arrItemFilter = id.split('-');
            if (arrItemFilter[0] !== undefined &&
                arrItemFilter[1] !== undefined 
            ) {
                minPriceFilter = parseFloat(arrItemFilter[1]);
            }
            if (arrItemFilter[2] !== undefined ) {
                maxPriceFilter = parseFloat(arrItemFilter[2]);
            } else {
                maxPriceFilter = 0;
            }

            if (minPriceFilter > 0) {
                filterLinkItem = 'price~gte~' + minPriceFilter;
                filterLink.push(filterLinkItem);
            }

            if (maxPriceFilter > 0) {
                filterLinkItem = 'price~lte~' + maxPriceFilter;
                filterLink.push(filterLinkItem);
            }
        }

        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        if (filterLink.length) {
            urlVars.shopby = filterLink.join('_');
        } else {
            delete urlVars.shopby;
        }
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    // Get sort
    var allowSortName = ['name', 'price'],
        allowSortOrder = ['asc', 'desc'],
        sortName = 'name',
        sortOrder = 'asc';
    var sort = $.getUrlVar('order') ? $.getUrlVar('order') : sortName + '~' + sortOrder;
    var arrSort = sort.split('~');
    if (arrSort[0] !== undefined && allowSortName.indexOf(arrSort[0]) >= 0) {
        sortName = arrSort[0].toLowerCase();
    }
    $("#shop-items-sort").val(sortName).trigger('change');

    if (arrSort[1] !== undefined && allowSortOrder.indexOf(arrSort[1]) >= 0) {
        sortOrder = arrSort[1].toLowerCase();
    }
    var htmlOrder, titleOrder, dataOrder;
    if (sortOrder == 'asc') {
        htmlOrder = '<i class="fa fa-long-arrow-up"></i>';
        titleOrder = 'Set Descending Direction';
    } else {
        htmlOrder = '<i class="fa fa-long-arrow-down"></i>';
        titleOrder = 'Set Ascending Direction';
    }
    $('#shop-items-order').html(htmlOrder).attr({ 'title': titleOrder, 'data-order': sortOrder });

    // Sort name change
    $('#shop-items-sort').change(function () {
        var sortChange = $(this).val() + '~' + sortOrder;
        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        urlVars.order = sortChange;
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    // Sort order change
    $('#shop-items-order').click(function (e) {
        e.preventDefault();
        var orderBy = $(this).attr('data-order').toString();
        orderBy = orderBy == 'asc' && allowSortOrder.indexOf(orderBy) >= 0 ? 'desc' : 'asc';
        var sortChange = $('#shop-items-sort').val().toString() + '~' + orderBy.toString();
        var curUrl = window.location.origin + window.location.pathname;
        var urlVars = $.extend({}, $.getUrlVars());
        urlVars.order = sortChange;
        var params = $.param(urlVars);
        var newUrl = curUrl;
        if (params) {
            newUrl = newUrl + '?' + decodeURIComponent(params);
        }
        location.href = newUrl;
    });

    // Get list products
    var page = $.getUrlVar('page') ? parseInt($.getUrlVar('page')) : 1;
    var urlProductApi = arrowConfig.apiUrl + 'api/v2/products?activeFlag=true&companyId=' + arrowConfig.companyId + '&page=' + page + '&pageSize=' + pageSize + '&sort=' + sort;
    if (filter) {
        if (keyword) {
            filter += '&keyword~contains~' + keyword;
        }
    } else {
        if (keyword) {
            filter = 'keyword~contains~' + keyword;
        }
    }
    if (filter) {
        urlProductApi = urlProductApi + '&filter=' + filter;
    }
    $.ajax({
        url: urlProductApi,
        contentType: "application/json",
        dataType: 'json',
        beforeSend: function () {
            $("#loading").removeClass('hidden');
        },
        complete: function () {
            // $("#loading").addClass('hidden');
        },
        success: function (result) {
            var total = result.total;
            var products = result.data.filter(function(item) { return item.active; });
            if (parseInt(total) == 0) {
                $('#all-product').html('<div class="not-found">Sorry! No products were found. Maybe we dont have this product!</div>');                
                $("#loading").addClass('hidden');
            } else {
                if (products.length == 0) {
                    var curUrl = window.location.origin + window.location.pathname;
                    var urlVars = $.extend({}, $.getUrlVars());
                    if ($.getUrlVar('page')) {
                        delete urlVars.page;
                    }
                    var params = $.param(urlVars);
                    var newUrl = curUrl;
                    if (params) {
                        newUrl = newUrl + '?' + decodeURIComponent(params);
                    }
                    location.href = newUrl;
                }
            }
            // Update paging
            var curUrl = window.location.origin + window.location.pathname;
            var urlVars = $.extend({}, $.getUrlVars());
            var htmlPaging = '';
            var totalPage = Math.ceil(total / pageSize);
            var pageRange = 3;
            if (page > 1) {
                urlVars.page = parseInt(page) - 1;
                var params = $.param(urlVars);
                var newUrl = curUrl;
                if (params) {
                    newUrl = newUrl + '?' + decodeURIComponent(params);
                }
                htmlPaging += '<li class="page-item"><a class="page-link" href="' + newUrl + '"><i class="fa fa-angle-left"></i></a></li>';
            } else {
                htmlPaging += '<li class="page-item"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-left"></i></a></li>';
            }
            var arrPage = pagination(page, totalPage);
            $.each( arrPage, function( k, i ) {
                urlVars.page = i;
                var params = $.param(urlVars);
                var newUrl = curUrl;
                if (params) {
                    newUrl = newUrl + '?' + decodeURIComponent(params);
                }
                htmlPaging += '<li class="page-item';
                if (i == page) {
                    htmlPaging += ' active';
                }
                if (i === '...') {
                    newUrl = 'javascript:void(0)';
                }
                htmlPaging += '"><a class="page-link" href="' + newUrl + '">' + i + '</a></li>';
            });
            if (page < totalPage) {
                urlVars.page = parseInt(page) + 1;
                var params = $.param(urlVars);
                var newUrl = curUrl;
                if (params) {
                    newUrl = newUrl + '?' + decodeURIComponent(params);
                }
                htmlPaging += '<li class="page-item"><a class="page-link" href="' + newUrl + '"><i class="fa fa-angle-right"></i></a></li>';
            } else {
                htmlPaging += '<li class="page-item"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-right"></i></a></li>';
            }
            $('#pagination').html(htmlPaging);

            var from = ((page - 1) * pageSize) + 1;
            var to = page * pageSize;
            if (to > total) {
                to = total;
            }
            var htmlAmount = 'Items ' + from + '-' + to + ' of ' + total;
            $('#shop-items-amount').html(htmlAmount);

            var html = '';
            $.each(products, function (i, item) {
                var price = parseFloat(item.price) + parseFloat(item.priceTax);
                var specialPrice = parseFloat(item.specialPrice) + parseFloat(item.specialPriceTax);
                html += '<li>';
                html += '<div class="wd-project product-item hvr-underline-from-center">';
                html += '<div><a href="product-detail.html?id=' + item.uid + '"><img src="'+ item.photos[0]['url'] +'" class="" alt="'+ item.name +'" /></a></div>';
                html += '<a href="product-detail.html?id=' + item.uid + '"><h4 class="match">'+ item.name +'</h4>';
                html += '</a>';
                // html += '<ul class="entry-meta row">';
                // html += '<li class="col-sm-4 col-xs-12 text-left">';
                // if ( item.specialPrice != null && specialPrice < price) {
                //     html += '<b>' + numberWithCommas(specialPrice) + '</b><br/>';
                //     html += '<span class="prev-price"><b>' + numberWithCommas(price) + '</b></span>';
                // } else {
                //     html += '<b>' + numberWithCommas(price) + '</b>';
                // }
                // html += '</li>';
                // html += '<li class="col-sm-8 col-xs-12 text-right">';
                // html += '<button class="add-to-cart" data-id="' + item.uid + '" data-name="' + item.name + '" data-color="' + item.color + '" data-price="' + item.price + '" data-tax="' + item.priceTax + '" data-category="' + item.category + '" data-img="' + item.photos[0]['url'] + '"><i class="fa fa-shopping-cart"></i> Add to cart</button>';
                // html += '</li>';
                // html += '</ul>';
                html += '</div>';
                html += '</li>';
            });
            $('#productList').html(html);
            $("#loading").addClass('hidden');
            $('.match').matchHeight({byRow: true});
        }
    });

    function pagination(c, m) {
        var current = c,
            last = m,
            delta = 3,
            left = current - delta,
            right = current + delta + 1,
            range = [],
            rangeWithDots = [],
            l;
    
        for (let i = 1; i <= last; i++) {
            if (i == 1 || i == last || i >= left && i < right) {
                range.push(i);
            }
        }
    
        for (let i of range) {
            if (l) {
                if (i - l === 2) {
                    rangeWithDots.push(l + 1);
                } else if (i - l !== 1) {
                    rangeWithDots.push('...');
                }
            }
            rangeWithDots.push(i);
            l = i;
        }
    
        return rangeWithDots;
    }    
});