$(function() {
    if ($('#my-orders').length < 1) {
        return;
    }
    const pageState = {
        Tab: opts.Tab,
        OrdersInit: 0,
        DiscountsInit: 0,
        PurchasesInit: 0,
    };
    const $idfilters = $('.id_filters');
    $('.id_tab_1').on('show.bs.tab', function(e) { openTab(1) });
    $('.id_tab_2').on('show.bs.tab', function(e) { openTab(2) });
    $('.id_tab_3').on('show.bs.tab', function(e) { openTab(3) });
    $('#menu_list').on('click', '.menu_item', function() { openTab($(this).data('menu')) });
    function openTab(num) {
        pageState.Tab = num;
        $('.id_tab_' + num).click();
        $idfilters.addClass('d-none');
        $('#menu_btn > span').text($('#menu_' + num + ' > span').text())
        $('.menu_item').removeClass('active');
        $('#menu_' + num).addClass('active');
        $('.menu_item > svg').hide();
        $('#menu_' + num + ' svg').show();
        [loadOrders, loadDiscounts, loadPurchases][num - 1]();
    }
    setTimeout(function() {
        if ($('#my-discounts').hasClass('active')) {
            openTab(2);
        } else if ($('#purchased-products').hasClass('active')) {
            openTab(3);
        } else {
            openTab(1);
        }
    }, 100);
    var loadOrders = function() {};
    (function() {
        loadOrders = function() {
            window.history.replaceState({tab:1}, '', '/history/');
            if (pageState.OrdersInit < 1) {
                pageState.OrdersInit = 1;
                loadNextPage();
            } else {
                setTimeout(function() { onScroll() }, 400);
            }
        };
        var $itemList = $('#my-orders');
        var $skeletons = $itemList.find('.skeleton');
        var $skeleton = $skeletons.first();
        var loading = false;
        var request = null;
        var itemCnt = 0;
        var cntRows = 10;
        var pageCnt = 0;
        var page = 0;
        function loadNextPage() {
            if (loading) return;
            loading = true;
            if (request) request.abort();
            page++;
            var getparams = {
                lang: opts.Lang == 'en-US' ? 'en' : 'ru',
                curr: opts.Curr,
                rows: cntRows,
                page: page,
            };
            request = $.get('/asp/history-orders.asp', getparams)
                .done(function(res) {
                    if (page === 1) {
                        var p = res.indexOf('|');
                        itemCnt = +res.substring('|', p)
                        pageCnt = Math.ceil(itemCnt / cntRows);
                        res = res.substring(p + 1);
                        $("#some-orders").toggleClass('d-none', itemCnt == 0);
                        $("#no-orders").toggleClass('d-none', itemCnt > 0);
                    }
                    $skeleton.before(res);
                    $skeletons.toggleClass('d-none', page >= pageCnt);
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 401) {
                        return window.location.href = "/";
                    }
                })
                .always(function() {
                    loading = false;
                    request = null;
                    setTimeout(function() { onScroll() }, 400);
                });
        }
        $('#my-orders')
            .on('click', '.id_write_to_seller', function(e) {
                e.preventDefault();
                var t = $(this);
                PopUp(+t.data('id_s'), 0, +t.data('id_d'));
            });
        function onScroll() {
            if (pageState.Tab != 1) return;
            if (page >= pageCnt) return;
            if ($(window).scrollTop() + 1050 > $(document).height() - $(window).height()) {
                loadNextPage();
            }
        }
        $(window).scroll(function() { onScroll() });
    })();
    var loadDiscounts = function() {};
    (function() {
        loadDiscounts = function() {
            window.history.replaceState({tab:2}, '', '/history/discounts/');
            if (pageState.DiscountsInit < 1) {
                pageState.DiscountsInit = 1;
                loadNextPage();
            } else {
                setTimeout(function() { onScroll() }, 400);
            }
        };
        var $itemList = $('#discounts_list');
        var $skeletons = $itemList.find('.skeleton');
        var $skeleton = $skeletons.first();
        var loading = false;
        var request = null;
        var itemCnt = 0;
        var cntRows = 25;
        var pageCnt = 0;
        var page = 0;
        function loadNextPage() {
            if (loading) return;
            loading = true;
            if (request) request.abort();
            page++;
            var getparams = {
                lang: opts.Lang == 'en-US' ? 'en' : 'ru',
                curr: opts.Curr,
                rows: cntRows,
                page: page,
            };
            request = $.get('/asp/history-discounts.asp', getparams)
                .done(function(res) {
                    if (page === 1) {
                        var p = res.indexOf('|');
                        itemCnt = +res.substring('|', p)
                        pageCnt = Math.ceil(itemCnt / cntRows);
                        res = res.substring(p + 1);
                        $("#some-discounts").toggleClass('d-none', itemCnt == 0)
                        $("#no-discounts").toggleClass('d-none', itemCnt > 0)
                    }
                    $skeleton.before(res);
                    $skeletons.toggleClass('d-none', page >= pageCnt);
                    loadAvatars();
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 401) {
                        return window.location.refresh();
                    }
                    console.log('error loading history-discounts.asp', errorThrown)
                })
                .always(function() {
                    loading = false;
                    request = null;
                    setTimeout(function() { onScroll() }, 400);
                });
        }
        function loadAvatars() {
            const wmids = $('.id_wmid_load').map(function() { return $(this).data('wmid') }).get();;
            const requestXml = buildRequestBody('small', wmids);
            $.ajax({
                method: 'post',
                url: 'https://events.web.money/open/avatars.aspx',
                data: requestXml,
                contentType: 'application/xml',
                dataType: 'xml'
            }).done(function(data) {
                $(data).find('avatar').each(function() {
                    let wmid = $(this).attr('wmid');
                    let base64 = $(this).attr('base64');
                    $('.id_svg_' + wmid).hide();
                    $('.id_wmid_load.id_wmid_' + wmid).attr('src', 'data:' + base64).removeClass('d-none');
                });
                const wmidsClasses = wmids.map(function(wmid) { return '.id_wmid_' + wmid }).join(',');
                $(wmidsClasses).removeClass('id_wmid_load');
            }).fail(function(error) {
                console.error('Error fetching avatars:', error);
            });
        }
        function buildRequestBody(sizeName, wmids) {
            let xmlRequest = `<request>`;
            xmlRequest += `<size>${sizeName}</size>`;
            xmlRequest += `<base64>true</base64>`;
            xmlRequest += `<wmids>`;
            wmids.forEach(wmid => {
                xmlRequest += `<wmid>${wmid}</wmid>`;
            });
            xmlRequest += `</wmids>`;
            xmlRequest += `</request>`;
            return xmlRequest;
        }
        function onScroll() {
            if (pageState.Tab != 2) return;
            if (page >= pageCnt) return;
            if ($(window).scrollTop() + 1050 > $(document).height() - $(window).height()) {
                loadNextPage();
            }
        }
        $(window).scroll(function() { onScroll() });
    })();
    var loadPurchases = function() {};
    (function() {
        var showFilters = false;
        loadPurchases = function() {
            window.history.replaceState({tab:3}, '', '/history/purchases/');
            if (pageState.PurchasesInit < 1) {
                pageState.PurchasesInit = 1;
                loadNextPage(true);
            } else {
                setTimeout(function() { onScroll() }, 400);
                if (showFilters) $idfilters.removeClass('d-none');
            }
        };
        createLoader();
        var $filters = $('#filters');
        var $avaSelector = $filters.find('#availability_selector');
        var $itemList = $('#purchases_list');
        var $itemCnt = $('#purchases_cnt');
        var $skeletons = $itemList.find('.skeleton');
        var $skeleton = $skeletons.first();
        var $someItems = $("#some-purchases");
        var $noItems = $("#no-purchases");
        var $noItems2 = $("#no-purchases2");
        var loading = false;
        var request = null;
        var itemCnt = 0;
        var PriceMin0 = 0;
        var PriceMax0 = 0;
        var cntRows = 20;
        var pageCnt = 0;
        var page = 0;
        var state = {
            PriceMin: 0,
            PriceMax: 0,
            Available: 0,
            Sort: '',
        };
        function loadNextPage(updatePriceSlider) {
            if (loading) return;
            loading = true;
            if (request) request.abort();
            page++;
            var getparams = {
                lang: opts.Lang == 'en-US' ? 'en' : 'ru',
                curr: opts.Curr,
                rows: cntRows,
                page: page,
            };
            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 (state.Available > 0) getparams.available = state.Available;
            if (state.Sort) getparams.sort = state.Sort;
            const filtered = getparams.price_min > 0 || getparams.price_max > 0 || getparams.available > 0;
            if (page === 1) {
                $itemList.addClass('disabled')
            }
            request = $.get('/asp/history-purchases.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];
                        $('#purchases_list > li:not(.skeleton)').remove();
                        if (itemCnt > 0) {
                            showFilters = true;
                        }
                        if (itemCnt > 0) {
                            $idfilters.removeClass('d-none');
                            $someItems.removeClass('d-none');
                            $noItems2.addClass('d-none');
                            $noItems.addClass('d-none');
                        } else if (filtered) {
                            $idfilters.removeClass('d-none');
                            $someItems.removeClass('d-none');
                            $noItems2.removeClass('d-none');
                            $noItems.addClass('d-none');
                        } else {
                            $idfilters.addClass('d-none');
                            $noItems.removeClass('d-none');
                            $someItems.addClass('d-none');
                            $noItems2.addClass('d-none');
                        }
                        $itemList.toggleClass('d-none', itemCnt < 1);
                    }
                    $skeleton.before(res);
                    $skeletons.toggleClass('d-none', page >= pageCnt);
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 401) {
                        return window.location.href = "/";
                    }
                })
                .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);
        }
        $avaSelector.on('change', 'input.available_radios', function() {
            $('input.available_radios[checked]').not(this).removeAttr('checked');
            load({ Available: +$(this).val(), PriceMin: 0, PriceMax: 0 });
        });
        $('#sort_list').on('click', '.sort_item', function() {
            load({ Sort: $(this).data('sort') });
        });
        function load(newState) {
            var ava = state.Available;
            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(ava != state.Available);
        }
        const $activeFilters = $('#active_filters');
        $activeFilters
            .on('click', '#active_filters_ava_clear', function() { load({ Available: 0 }) })
            .on('click', '#active_filters_prices_clear', function() { load({ PriceMin: 0, PriceMax: 0 }) })
            .on('click', '#active_filters_reset', function() { load({ Available: 0, PriceMin: 0, PriceMax: 0 }) })
        $('.id_active_filters_reset').click(function() { load({ Available: 0, PriceMin: 0, PriceMax: 0 }) })
        const $activeFiltersAva = $activeFilters.find('#active_filters_ava');
        const $activeFiltersPrices = $activeFilters.find('#active_filters_prices');
        const $filtersNum = $('#filters_num');
        function view() {
            $avaSelector.find('input.available_radios').prop('checked', false);
            $('#available-' + state.Available).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();
            $('#sort_' + state.Sort + ' svg').show();
            const filtersNum = (state.Available > 0 ? 1 : 0) + (hasPricesFilter() ? 1 : 0);
            $filtersNum.find('span').text(filtersNum);
            $filtersNum.toggleClass('d-none', filtersNum < 1);
            if (state.Available > 0)  $activeFiltersAva.find('span').html( $('#available-' + state.Available).data('name') );
            if (hasPricesFilter()) $activeFiltersPrices.find('span').html( buildPricesFilterText() );
            $activeFilters.toggleClass('d-none', filtersNum < 1);
            $activeFiltersAva.toggle(state.Available > 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;
        }
        function createLoader() {
            for(let i = 0; i < 6; i++) {
                let template = document.getElementById("item-card");
                let itemNode = template.content.cloneNode(true);
                $(itemNode).find('li').addClass("skeleton")
                $(itemNode).find('li').attr("name","loader")
                $('#purchases_list').append(itemNode);
            }
        }
        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 onScroll() {
            if (pageState.Tab != 3) return;
            if (page >= pageCnt) return;
            if ($(window).scrollTop() + 1050 > $(document).height() - $(window).height()) {
                loadNextPage();
            }
        }
        $(window).scroll(function() { onScroll() });
    })();
});