$(function () {
    const state = {
        Tab: 0,
        ID_R: +opts.ID_R,
        Curr: opts.Curr,
        PriceMin: +opts.PriceMin,
        PriceMax: +opts.PriceMax,
        Sort: opts.Sort,
        ItemsListView: opts.ItemsListView,
        SellerWmid: opts.SellerWmid
    };
    const $filters = $('#filters');
    const $catSelector = $filters.find('#cat_selector');
    const $moreBtn = $catSelector.find('.more-button');
    $moreBtn.click(function () {
        $catSelector.find('.id_cat_wrapper_ex').toggle();
        if ($catSelector.find('.id_cat_wrapper_ex').is(':hidden')) {
            $catSelector.find('div.custom-scroll').removeClass("max-height-300");
            $moreBtn.find('span').text($moreBtn.data('show'));
        }
        else {
            $catSelector.find('div.custom-scroll').addClass("max-height-300");
            $moreBtn.find('span').text($moreBtn.data('hide'));
        }
    });
    $('.id_clear_btn').click(function () {
        const inp = $(this).data('for');
        const $inp = $(inp);
        $inp.val('');
        $inp.focus();
        onCatSearch();
    });
    const $catSearch = $filters.find('#cat_search');
    $catSearch.on('input', onCatSearch);
    function onCatSearch() {
        let v = $catSearch.val();
        if (v === '') {
            $catSelector.find('.id_cat_wrapper').show();
            $moreBtn.find('span').text($moreBtn.data('hide'));
            $moreBtn.show();
            return;
        }
        v = v.toUpperCase();
        $moreBtn.hide();
        $catSelector.find('.id_cat_wrapper').hide();
        $catSelector.find('.id_cat_wrapper').filter(function (i, el) {
            const t = $(el).find('label').text().toUpperCase();
            return t.indexOf(v) > -1;
        }).each(function (i, el) {
            $(el).show();
        });
    }
    const cntRows = 24;
    const $itemCnt = $('#item_cnt');
    const $itemList = $('#item_list');
    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 = 0;
    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_s: opts.ID_S,
            id_r: state.ID_R,
            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")
        } else {
            $skeletons.removeClass("d-none")
        }
        request = $.get('/asp/block_goods_s2.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);
                $itemList.removeClass("disabled")
            })
            .always(function () {
                loading = false;
                request = null;
                setTimeout(function () { onScroll() }, 1000);
                UpdateFiltersPosition("#filters");
            });
        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 || state.Tab > 0) 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) {
            console.log('onpopstate')
            load(e.state);
        }
    };
    $catSelector.on('change', 'input.id_r_radios', function () {
        $('input.id_r_radios[checked]').not(this).removeAttr('checked');
        load({ ID_R: +$(this).val(), PriceMin: 0, PriceMax: 0 });
    });
    $('#sort_list').on('click', '.sort_item', function () {
        load({ Sort: $(this).data('sort') });
    });
    function load(newState) {
        const id_r = state.ID_R;
        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;
        // console.log(before);
        // console.log(after);
        view();
        page = 0;
        loading = false;
        loadNextPage(id_r != state.ID_R);
    }
    const $activeFilters = $('#active_filters');
    $activeFilters
        .on('click', '#active_filters_cat_clear', function () { load({ ID_R: 0 }) })
        .on('click', '#active_filters_prices_clear', function () { load({ PriceMin: 0, PriceMax: 0 }) })
        .on('click', '#active_filters_reset', function () { load({ ID_R: 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_R) p.push('id_r=' + state.ID_R);
        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('input.id_r_radios').prop('checked', false);
        $('#cat-' + state.ID_R).prop('checked', true);
        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();
        const filtersNum = (state.ID_R ? 1 : 0) + (hasPricesFilter() ? 1 : 0);
        $filtersNum.find('span').text(filtersNum);
        $filtersNum.toggleClass('d-none', !filtersNum);
        if (state.ID_R > 0) $activeFiltersCat.find('span').html($('#cat-' + state.ID_R).data('name'));
        if (hasPricesFilter()) $activeFiltersPrices.find('span').html(buildPricesFilterText());
        $activeFilters.toggleClass('d-none', filtersNum < 1);
        $activeFiltersCat.toggle(state.ID_R > 0);
        $activeFiltersPrices.toggle(hasPricesFilter());
    }
    function hasPricesFilter() { return hasPriceMinFilter() || hasPriceMaxFilter() }
    function hasPriceMinFilter() { return state.PriceMin > 0 && state.PriceMin > PriceMin0 }
    function hasPriceMaxFilter() { return state.PriceMax > 0 && state.PriceMax < 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];
    if (priceSlider) {
        noUiSlider.create(priceSlider, {
            start: [state.PriceMin > 0 ? state.PriceMin : PriceMin0, state.PriceMax > 0 ? state.PriceMax : PriceMax0],
            step: 1,
            connect: true,
            range: {
                'min': PriceMin0 || 0,
                'max': PriceMax0 || 0
            },
            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();
    var reviewsCount = [opts.TotalReviews, opts.GoodReviews, opts.BadReviews];
    var sellerAvatarForCommentSection = null;
    var reviewsLoading = false;
    var reviewsFilter = {
        sellerId: opts.ID_S,
        sort: opts.Sort,
        rows: 5,
        currency: opts.Curr,
        page: 0,
        clientGeo: opts.ClientGEO,
        mode: opts.ReviewMode || 0
    }
    var reviewsSkeleton = $('#reviews_skeleton_template').html();
    $("#reviews-sorting li").on("click", function (ev) {
        reviewsFilter.sort = $(ev.currentTarget).attr("sort-by");
        $("#reviews-sorting  [name='review-sort-name']").text($(ev.currentTarget).find("span").text())
        $("#reviews-sorting ul li").removeClass("custom-dropdown-item--active");
        $(ev.currentTarget).addClass("custom-dropdown-item--active")
        applyReviewsSorting();
    })
    $("#reviews-mode [mode]").on("click", function (ev) {
        reviewsFilter.mode = $(ev.currentTarget).attr("mode");
        let text = $(`#reviews-mode li[mode='${reviewsFilter.mode}'] > span`).text();
        $("#reviews-mode  [name='review-mode-name']").contents().get(0).nodeValue = text;
        $("#reviews-mode ul li").removeClass("custom-dropdown__item--active");
        $("#reviews-mode ul svg").remove();
        $(ev.currentTarget).append('<svg class="icon" width="20" height="20"><use xlink:href="/build/sprite.svg#checkbox"></use></svg>');
        $(ev.currentTarget).addClass("custom-dropdown__item--active");
        applyReviewsSorting();
    })
    /*
    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;
        }
    }
    */
    function applyReviewsSorting() {
        reviewsFilter.page = 0;
        reviewsLoading = false;
        loadMoreReviews();
    }
    function loadMoreReviews() {
        let cnt = reviewsCount[reviewsFilter.mode];
        if (cnt < 1 && reviewsFilter.page < 1) {
            $("#reviews").html('');
            $(".id_reviews_empty").removeClass("d-none");
            $(".id_reviews_empty p").hide();
            $(".id_reviews_empty_mode_" + reviewsFilter.mode).show();
        } else {
            $(".id_reviews_empty").addClass("d-none");
        }
        if (!reviewsLoading && reviewsFilter.page * reviewsFilter.rows < cnt) {
            reviewsFilter.page += 1;
            loadReviews(reviewsFilter.sellerId, reviewsFilter.mode, reviewsFilter.page,
                reviewsFilter.rows, reviewsFilter.sort, opts.Lang)
        }
        if (reviewsFilter.page * reviewsFilter.rows < cnt) {
            $("#load_more_reviews").show()
        } else {
            $("#load_more_reviews").hide()
        }
    }
    async function loadReviews(sellerId, mode, page, count, order, lang) {
        let request = {
            id_d: 0,
            id_s: sellerId,
            mode: mode,
            page: page,
            rows: count,
            cat: "",
            ord: order,
            lang: lang
        }
        showReviewsLoading();
        if (sellerAvatarForCommentSection == null) {
            sellerAvatarForCommentSection = await LoadSellerAvatarForCommentsSection(state.SellerWmid);
        }
        return $.get('/asp/block_responses2.asp', request)
            .done(function (response) {
                $response = $(response)
                if (sellerAvatarForCommentSection != "") {
                    $response.find("svg.icon--avatar").each((i, el) => $(el).replaceWith(sellerAvatarForCommentSection))
                }
                if (page === 1) {
                    $("#reviews").html($response)
                } else {
                    $("#reviews").append($response)
                }
            })
            .fail(function () {
                alert(opts.SomethingWentWrong)
            })
            .always(function () {
                // $("#reviews").removeClass('disabled');
                hideReviewsLoading();
            });
    }
    function showReviewsLoading() {
        reviewsLoading = true
        $('#load_more_reviews').attr('disabled', 'disabled');
        var f = reviewsFilter;
        if (f.page <= 1) {
            // $('#reviews').addClass('disabled');
            $('#reviews').html('');
        } else {
            $('#load_more_reviews .icon').hide();
            $('#load_more_reviews .loader').show();
        }
        let cnt = reviewsCount[f.mode];
        let n = f.rows;
        if (f.page * f.rows > cnt) {
            n = cnt % f.rows;
        }
        for (let i = 0; i < n; i++) {
            $('#reviews').append(reviewsSkeleton);
        }
    }
    function hideReviewsLoading() {
        // $('#reviews').removeClass('disabled');
        $('#reviews .skeleton').remove();
        $('#load_more_reviews .icon').show();
        $('#load_more_reviews .loader').hide();
        $('#load_more_reviews').removeAttr('disabled');
        reviewsLoading = false
    }
    // $("ul.section-list").on("click", gameCardClick);
    $("#load_more_reviews").on("click", function () {
        loadMoreReviews();
    });
    var reviewsLoaded = 0;
    $('#products-tab').on('show.bs.tab', function (e) { state.Tab = 0; });
    $('#products-reviews-tab').on('show.bs.tab', function (e) { state.Tab = 2; if (!reviewsLoaded) { loadMoreReviews(); reviewsLoaded = 1; } });
    if (opts.ShowTelegram) {
        var href = isMobile.any ? "tg://resolve?domain=" : "https://t.me/";
        href += encodeURIComponent(opts.TxtTelegram);
        $("#tlg_link").attr("href", href)
    }
    let hiding = null;
    let popover = $("#seller_info_popup")
    $("#seller-popover-button")
        .on('pointerenter', function (ev) {
            if (ev.originalEvent.pointerType != "touch") {
                if (hiding) clearTimeout(hiding);
                popover.removeClass("d-none");
            }
        })
        .on('mouseleave', function () {
            scheduleHide();
        })
        .on('click', function (ev) {
            ev.preventDefault();
            let link = $("#seller_info_popup a").attr("href");
            window.open(link, '_blank');
        });
    $('body')
        .on('mouseenter', '#seller_info_popup', function () {
            if (hiding) clearTimeout(hiding);
            popover.removeClass("d-none");
        })
        .on('mouseleave', '#seller_info_popup', function () {
            scheduleHide();
        });
    function scheduleHide() {
        hiding = setTimeout(function () {
            popover.addClass("d-none");
        }, 400);
    }
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    function LoadSellerBl(sellerWmid) {
        return $.get(`https://events.web.money/api/user/public?wmid=${sellerWmid}`)
            .done(function (response) {
                let bl = response && response.bl ? response.bl : "?";
				$("#seller-bl").text(bl);
			})
            .fail(function () {
				console.log("Failed to load seller BL");
				$("#seller-bl").text("?");
			});
    }
    LoadSellerAvatar("[name='seller-avatar']", state.SellerWmid)
    LoadSellerBl(state.SellerWmid);
    $(window).on("scroll resize", () => UpdateFiltersPosition("#filters"));
    UpdateFiltersPosition("#filters")
});