$(function() {
    const state = {
        ID_C: +opts.ID_C,
        Curr: opts.Curr,
        PriceMin: +opts.PriceMin,
        PriceMax: +opts.PriceMax,
        Sort: opts.Sort,
        ItemsListView: opts.ItemsListView
    };
    const cntRows = 24;
    const $filters = $('#filters');
    const $catSelector = $filters.find('#cat_selector');
    const $itemList = $('#item_list');
    const $itemCnt = $('#item_cnt');
    let $skeletons = $itemList.find('.skeleton');
    let $skeleton = $skeletons.first();
    let itemCnt = +$itemCnt.text();
    let pageCnt = Math.ceil(itemCnt / cntRows);
    let PriceMin0 = opts.PriceMin0;
    let PriceMax0 = opts.PriceMax0;
    let loading = false;
    let page = 1;
    let request = null;
    createLoader();
    $skeletons.toggleClass('d-none', page >= pageCnt)
    function loadNextPage(updatePriceSlider) {
        if (loading) return;
        loading = true;
        if (request) request.abort();
        page++;
        const getparams = {
            id_cb: opts.ID_CB,
            id_c: state.ID_C,
            sort: state.Sort,
            page: page,
            rows: cntRows,
            curr: opts.Curr,
            lang: opts.Lang == 'en-US' ? 'en' : 'ru'
        };
        if (state.PriceMin > 0 && state.PriceMin > PriceMin0) getparams.price_min = state.PriceMin;
        if (state.PriceMax > 0 && state.PriceMax < PriceMax0) getparams.price_max = state.PriceMax;
        if (page === 1) {
            $itemList.addClass('disabled')
            scrollToShow('#sort_btn')
        }
        request = $.get('/asp/block_goods_category_2.asp', getparams)
            .done(function(res) {
                if (page === 1) {
                    var p = customSplit(res, '|', 4);
                    itemCnt = +p[0];
                    $itemCnt.text(itemCnt);
                    pageCnt = Math.ceil(itemCnt / cntRows);
                    if (updatePriceSlider) {
                        updatePrices(itemCnt > 0 ? +p[1] : 0, itemCnt > 0 ? +p[2] : 0);
                    }
                    res = p[3];
                    $('#item_list > li:not(.skeleton)').remove();
                    $("#products-not-found").toggleClass('d-none', itemCnt > 0)
                }
                $skeleton.before(res);
                $skeletons.toggleClass('d-none', page >= pageCnt);
				UpdateFiltersPosition("#filters")
            })
            .always(function() {
                loading = false;
                request = null;
                $itemList.removeClass('disabled');
                setTimeout(function() { onScroll() }, 1000);
            });
        function customSplit(str, delimiter, limit) {
            let parts = str.split(delimiter);
            if (parts.length > limit) {
                return [...parts.slice(0, limit - 1), parts.slice(limit - 1).join(delimiter)];
            }
            return parts;
        }
    }
    function updatePrices(newMin0, newMax0) {
        PriceMin0 = newMin0;
        PriceMax0 = newMax0;
        priceSlider.noUiSlider.updateOptions({
            start: [state.PriceMin > 0 ? state.PriceMin : PriceMin0, state.PriceMax > 0 ? state.PriceMax : PriceMax0],
            range: {
                'min': PriceMin0,
                'max': PriceMax0
            }
        }, true);
    }
    $(window).on('scroll resize', $.throttle(100, onScroll));
    function onScroll() {
        if (page >= pageCnt) return;
        if ($(window).scrollTop() + $(window).height() + 1000 > $skeleton.offset().top) {
            loadNextPage();
        }
    }
    setTimeout(function() { onScroll() }, 400);
    window.history.replaceState(state, '', '');
    window.onpopstate = function(e) {
        if (e && e.state) {
            load(e.state);
        }
    };
    $catSelector.on('change', 'input.id_c_radios', function() {
        load({ ID_C: +$(this).val(), PriceMin: 0, PriceMax: 0 });
    });
    $('#sort_list').on('click', '.sort_item', function() {
        load({ Sort: $(this).data('sort') });
    });
    function load(newState) {
        const id_c = state.ID_C;
        const before = JSON.stringify(state);
        for (const k in newState)
            if (state.hasOwnProperty(k) && newState.hasOwnProperty(k))
                state[k] = newState[k];
        const after = JSON.stringify(state);
        if (after === before) return;
        view();
        page = 0;
        loading = false;
        loadNextPage(id_c != state.ID_C);
    }
    const $activeFilters = $('#active_filters');
    $activeFilters
        .on('click', '#active_filters_cat_clear', function() { load({ ID_C: 0 }) })
        .on('click', '#active_filters_prices_clear', function() { load({ PriceMin: 0, PriceMax: 0 }) })
        .on('click', '#active_filters_reset', function() { load({ ID_C: 0, PriceMin: 0, PriceMax: 0 }) })
    const $activeFiltersCat = $activeFilters.find('#active_filters_cat');
    const $activeFiltersPrices = $activeFilters.find('#active_filters_prices');
    const $filtersNum = $('#filters_num');
    function view() {
        let url = window.location.pathname;
        let p = [];
        if (state.ID_C) p.push('id_c=' + state.ID_C);
        if (hasPricesFilter()) p.push('curr=' + state.Curr);
        if (hasPriceMinFilter()) p.push('price_min=' + state.PriceMin);
        if (hasPriceMaxFilter()) p.push('price_max=' + state.PriceMax);
        if (state.Sort) p.push('sort=' + state.Sort);
        if (p.length) url += '?' + p.join('&')
        if (url == window.location.pathname + window.location.search) return;
        window.history.replaceState(state, '', url);
        $catSelector.find('.id_c_radios').prop('checked', false).removeAttr('checked');
        $('#cat-' + state.ID_C).prop('checked', 'checked').attr('checked', 'checked');
        priceSlider.noUiSlider.set([state.PriceMin > 0 ? state.PriceMin : PriceMin0, state.PriceMax > 0 ? state.PriceMax : PriceMax0]);
        $('#sort_btn > span').text($('#sort_' + state.Sort + ' > span').text())
        $('.sort_item').removeClass('custom-dropdown-item--active');
        $('#sort_' + state.Sort).addClass('custom-dropdown-item--active');
        $('.sort_item > svg').hide();
        $('#sort_' + state.Sort + ' svg').show();
        const filtersNum = (state.ID_C ? 1 : 0) + (hasPricesFilter() ? 1 : 0);
        $filtersNum.find('span').text(filtersNum);
        $filtersNum.toggleClass('d-none', !filtersNum);
        if (state.ID_C > 0)  $activeFiltersCat.find('span').html( $('#cat-' + state.ID_C).data('name') );
        if (hasPricesFilter()) $activeFiltersPrices.find('span').html( buildPricesFilterText() );
        $activeFilters.toggleClass('d-none', filtersNum < 1);
        $activeFiltersCat.toggle(state.ID_C > 0);
        $activeFiltersPrices.toggle(hasPricesFilter());
    }
    function hasPricesFilter() { return hasPriceMinFilter() || hasPriceMaxFilter() }
    function hasPriceMinFilter() { return state.PriceMin > 0 && state.PriceMin > opts.PriceMin0 }
    function hasPriceMaxFilter() { return state.PriceMax > 0 && state.PriceMax < opts.PriceMax0 }
    function buildPricesFilterText() {
        const s = $activeFiltersPrices.find('span');
        let text = s.data('price');
        if (hasPriceMinFilter()) text += s.data('from') + state.PriceMin + s.data('curr');
        if (hasPriceMaxFilter()) text += s.data('to') + state.PriceMax + s.data('curr');
        return text;
    }
    var delayInputPriceTimer;
    function applyPriceFilter() {
        clearTimeout(delayInputPriceTimer);
        delayInputPriceTimer = setTimeout(function() {
            let min = +$('#price-start-value-input').val();
            let max = +$('#price-end-value-input').val();
            if (min <= PriceMin0) min = 0;
            if (max >= PriceMax0) max = 0;
            load({PriceMin: min, PriceMax: max});
        }, 400);
    }
    var priceSlider = document.getElementById('price-slider');
    var startValueInput = document.getElementById('price-start-value-input');
    var endValueInput = document.getElementById('price-end-value-input');
    var inputs = [startValueInput, endValueInput];
    noUiSlider.create(priceSlider, {
        start: [state.PriceMin > 0 ? state.PriceMin : PriceMin0, state.PriceMax > 0 ? state.PriceMax : PriceMax0],
        step: 1,
        connect: true,
        range: {
            'min': PriceMin0,
            'max': PriceMax0
        },
        format: {
            to: (v) => parseFloat(v).toFixed(0),
            from: (v) => parseFloat(v).toFixed(0)
        }
    });
    priceSlider.noUiSlider.on('update', function (values, handle) {
        inputs[handle].value = values[handle];
        applyPriceFilter();
    });
    inputs.forEach(function (input, handle) {
        input.addEventListener('change', function () {
            priceSlider.noUiSlider.setHandle(handle, this.value);
            applyPriceFilter();
        });
        input.addEventListener('keydown', function (e) {
            var values = priceSlider.noUiSlider.get();
            var value = Number(values[handle]);
            var steps = priceSlider.noUiSlider.steps();
            // [down, up]
            var step = steps[handle];
            var position;
            // 13 is enter,
            // 38 is key up,
            // 40 is key down.
            switch (e.which) {
                case 13:
                    priceSlider.noUiSlider.setHandle(handle, this.value);
                    applyPriceFilter();
                    break;
                case 38:
                    // Get step to go increase slider value (up)
                    position = step[1];
                    // false = no step is set
                    if (position === false) {
                        position = 1;
                    }
                    // null = edge of slider
                    if (position !== null) {
                        priceSlider.noUiSlider.setHandle(handle, value + position);
                    }
                    break;
                case 40:
                    position = step[0];
                    if (position === false) {
                        position = 1;
                    }
                    if (position !== null) {
                        priceSlider.noUiSlider.setHandle(handle, value - position);
                    }
                    break;
            }
        });
    });
    function createLoader() {
        $itemList.find("[name='loader']").remove();
        if ($.cookie('items_list_view') != "table") {
            CreateSkeletonLoader($itemList);
        } else {
            CreateSkeletonLoaderListViewType($itemList);
        }
        $itemList.find("[name='loader']").addClass("skeleton");
        $skeletons = $itemList.find('.skeleton');
        $skeleton = $skeletons.first();
    }
    /*
    $itemList.on("click", gameCardClick);
    function gameCardClick(ev) {
        let action = $(ev.target).closest('[action]');
        if (action.length == 0) return;
        switch (action.attr("action")) {
            case 'toggleInFavorites':
                ev.preventDefault()
                toggleInFavorites(ev);
                break;
        }
    }
    */
    $("#items-list-view [aria-controls]").on("click", (ev)=>{
        SwitchItemsListView(ev);
        createLoader();
        load({ ItemsListView: $.cookie('items_list_view') });
        $('ul#items_list').toggleClass("vertical-list", $.cookie('items_list_view') == "table")
    })
    $(window).on("resize", ItemsListViewResize)
    ItemsListViewResize();
});
$(function() {
    new Swiper("#best-offer-slider", {
        slidesPerView: 1.1,
        spaceBetween: 8,
        breakpoints: {
            420: {
                slidesPerView: "auto",
                spaceBetween: 16,
            },
            500: {
                slidesPerView: "auto",
            },
            992: {
                allowTouchMove: false,
                disableOnInteraction: false
            }
        },
        on: {
            init: function () {
                $('#best-offer-slider').removeClass('yet');
            }
        }
    });
});
$(function() {
    $(window).on("scroll resize", () => UpdateFiltersPosition("#filters"));
    UpdateFiltersPosition("#filters")
});
$(function() {
    if (!document.getElementById('descr_p1'))
        return;
    var clamped = true;
    var $block = $('#descr_block');
    var img = $block.find('#descr_img')[0];
    var h = $block.find('#descr_h1')[0];
    var $p1 = $block.find('#descr_p1');
    var $p2 = $block.find('#descr_p2');
    var p1 = $p1[0];
    var p2 = $p2[0];
    var $a = $block.find('#descr_a');
    var a = $a[0];
    var $at = $a.find('span');
    var s1 = $block.find('#specs_desktop')[0];
    var hide = $a.data('hide');
    var show = $a.data('show');
    // var lh = parseFloat(getComputedStyle(p1).lineHeight);
    // var ah = a.scrollHeight;
    var lh = 24;
    var ah = 20;
    $a.click(function(e) {
        e.preventDefault();
        clamped = !clamped;
        fix();
    });
    window.addEventListener('resize', fix);
    fix();
    function fix() {
        if (window.innerWidth < 768) {
            fix2();
        } else {
            fix1();
        }
    }
    function fix1() {
        // var imgh = img.scrollHeight;
        var imgh = 240;
        var sh = s1.scrollHeight;
        fixr(imgh, sh, p1, $p1);
    }
    function fix2() {
        // var imgh = img.scrollHeight;
        var imgh = 126;
        var sh = 0;
        fixr(imgh, sh, p2, $p2);
    }
    function fixr(imgh, sh, p, $p) {
        var hh = h.scrollHeight;
        var bh = imgh - hh - sh;
        var ph = p.scrollHeight;
        if (bh >= ph) {
            $p.removeClass('line-clamp');
            $a.addClass('d-none');
            return;
        }
        if (!clamped) {
            $p.removeClass('line-clamp');
            $at.text(hide);
            $a.removeClass('d-none');
        } else {
            $p.addClass('line-clamp');
            var l = Math.floor((bh - ah) / lh);
            $p.prop('style', '-webkit-line-clamp: ' + l);
            $at.text(show);
            $a.removeClass('d-none');
        }
    }
});