$(function() {
    const state = {
        ID_CG: +opts.ID_CG,
        Letter: opts.Letter || '',
        Preorders: !!opts.Preorders,
        Sort: opts.Sort
    };
    const $filters = $('#filters');
    const $genreSelector = $filters.find('#genre_selector');
    const $genreSearch = $genreSelector.find('#genre_search');
    const $genreClear = $genreSelector.find('.id_genre_clear_btn');
    const $genreMore = $genreSelector.find('.more-button');
    $genreSearch.on('input', onGenreSearch );
    $genreClear.click( onGenreClear );
    $genreMore.click( onGenreMore );
    function onGenreSearch() {
        let v = $genreSearch.val();
        if (v === '') {
            $genreSelector.find('.id_genre_wrapper').show();
            $genreMore.find('span').text($genreMore.data('hide'));
            $genreMore.show();
            return;
        }
        v = v.toUpperCase();
        $genreMore.hide();
        $genreSelector.find('.id_genre_wrapper').hide();
        $genreSelector.find('.id_genre_wrapper').filter(function(i, el) {
            const t = $(el).find('label').text().toUpperCase();
            return t.indexOf(v) > -1;
        }).each(function(i, el) {
            $(el).show();
        });
    }
    function onGenreClear() {
        $genreSearch.val('').focus();
        onGenreSearch();
    }
    function onGenreMore() {
        $genreSelector.find('.id_genre_wrapper_ex').toggle();
        $genreMore.find('span').text(
            $genreSelector.find('.id_genre_wrapper_ex').is(':hidden')
                ? $genreMore.data('show')
                : $genreMore.data('hide')
        );
    }
    const $itemList = $('#item_list');
    const $itemListEmpty = $('#item_list_empty');
    const $itemCnt = $('#item_cnt');
    const $skeletons = $itemList.find('.skeleton');
    const $skeleton = $skeletons.first();
    const cntRows = opts.PerPage;
    let itemCnt = +$itemCnt.text();
    let pageCnt = Math.ceil(itemCnt / cntRows);
    let loading = false;
    let page = opts.Page;
    let request = null;
    function loadNextPage() {
        if (loading) return;
        loading = true;
        if (request) request.abort();
        page++;
        const getparams = {
            id_cg: state.ID_CG,
            l: state.Letter,
            preorders: state.Preorders ? 1 : 0,
            sort: state.Sort,
            page: page,
            rows: cntRows,
            lang: opts.Lang == 'en-US' ? 'en' : 'ru'
        };
        if (page === 1) {
            $itemList.addClass('disabled')
            scrollToShow('#sort_btn')
        }
        request = $.get('/asp/block_games2.asp', getparams)
            .done(function(res) {
                if (page === 1) {
                    itemCnt = +res.substring(0, res.indexOf('|'))
                    $itemCnt.text(itemCnt);
                    $itemListEmpty.toggleClass('d-none', itemCnt > 0)
                    pageCnt = Math.ceil(itemCnt / cntRows);
                    res = res.substring(res.indexOf('|') + 1) // skipping itemCnt
                    $('#item_list > li:not(.skeleton)').remove();
                }
                $skeleton.before(res);
                $skeletons.toggleClass('d-none', page >= pageCnt);
				UpdateFiltersPosition("#filters");
            })
            .always(function() {
                loading = false;
                request = null;
                $itemList.removeClass('disabled');
                setTimeout(function() { onScroll() }, 400);
            });
    }
    $(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);
    };
    $genreSelector.on('change', 'input.genre_radio', function() {
        load({ ID_CG: +$(this).val() });
    });
    const $letters = $('#letters');
    $letters.on('click', '.id_letter', function(e) {
        e.preventDefault();
        let letter = $(this).data('letter');
        if (letter == state.Letter) letter = '';
        load({ Letter: letter });
    });
    const $preorders = $('#preorders');
    $preorders.change(function() {
        if ($preorders.is(':checked')) {
            load({ Preorders: 1, Sort: '' });
        } else {
            load({ Preorders: 0 });
        }
    });
    $('#sort_list').on('click', '.sort_item', function() {
        load({ Sort: $(this).data('sort') });
    });
    function load(newState) {
        for (const k in newState)
            if (state.hasOwnProperty(k) && newState.hasOwnProperty(k))
                state[k] = newState[k];
        view();
        page = 0;
        loading = false;
        loadNextPage();
    }
    const $activeFilters = $('#active_filters');
    $activeFilters
        .on('click', '#active_filters_genre_clear', function() { load({ ID_CG: 0 }) })
        .on('click', '#active_filters_letter_clear', function() { load({ Letter: '' }) })
        .on('click', '#active_filters_preorders_clear', function() { load({ Preorders: 0 }) })
        .on('click', '#active_filters_reset', function() { load({ ID_CG: 0, Letter: '', Preorders: 0 }) })
    $('.id_active_filters_reset').click(function() { load({ ID_CG: 0, Letter: '', Preorders: 0 }) })
    const $activeFiltersGenre = $activeFilters.find('#active_filters_genre');
    const $activeFiltersLetter = $activeFilters.find('#active_filters_letter');
    const $activeFiltersPreorders = $activeFilters.find('#active_filters_preorders');
    const $filtersNum = $('#filters_num');
    function view() {
        let url = '/games/';
        if (state.Preorders) url += 'preorders/';
        let p = [];
        if (state.ID_CG) p.push('id_cg=' + state.ID_CG);
        if (state.Letter) p.push('l=' + state.Letter);
        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);
        $genreSelector.find('.genre_radio').prop('checked', false).removeAttr('checked');
        $('#genre-' + state.ID_CG).prop('checked', 'checked').attr('checked', 'checked');
        $letters.find('.id_letter.button--accent').removeClass('button--accent');
        if (state.Letter) $letters.find('.id_letter[data-letter=' + state.Letter + ']').addClass('button--accent');
        if (state.Preorders)
            $preorders.prop('checked', 'checked').attr('checked', 'checked');
        else
            $preorders.prop('checked', false).removeAttr('checked');
        $('#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_CG ? 1 : 0) + (state.Letter ? 1 : 0) + (state.Preorders ? 1 : 0);
        $filtersNum.find('span').text(filtersNum);
        $filtersNum.toggleClass('d-none', !filtersNum);
        if (state.ID_CG > 0)  $activeFiltersGenre.find('span').html( $('#genre-' + state.ID_CG + '-label').html() );
        if (state.Letter != '') $activeFiltersLetter.find('span').html($activeFiltersLetter.data('label') + state.Letter.toUpperCase() );
        $activeFilters.toggleClass('d-none', filtersNum < 1);
        $activeFiltersGenre.toggle(state.ID_CG > 0);
        $activeFiltersLetter.toggle(state.Letter != '');
        $activeFiltersPreorders.toggle(state.Preorders > 0);
    }
	$(window).on("scroll resize", () => UpdateFiltersPosition("#filters"));
	UpdateFiltersPosition("#filters")
});