const query = $('.search-input');

let s_offset = 0;
const s_amount = 10;
let s_firstRun = true;
let s_itemsLeft = true;
let s_running = false;
let val_changed = true;

let keyUpEvent;

function searchEntries() {
    const type = $('input[name=type]:checked').val();
    const rank = $('#searchForRank').val();
    const lang = $('#searchForLang').data('value');
    const country = $('#searchForCountry').data('value');
    console.log(rank);
    if (!s_running && ((s_itemsLeft || val_changed) && (query.val().length > 0 || (type === 'type-users' && (rank !== '' || lang !== '' || country !== ''))))) {
        console.log(rank);
        $.ajax({
            url: '/posts/getSearchPosts',
            data: {
                query: query.val(),
                type,
                rank,
                lang,
                country,
                amount: s_amount,
                offset: s_offset
            },
            beforeSend: () => {
                if (s_firstRun || val_changed) {
                    $('.comment-list').empty();
                    $('.no-more-posts-message').remove();
                }
                $('.loading-spinner').show();
                s_running = true;
            },
            success: (data) => {
                $('.loading-spinner').hide();
                $('.post-container .comment-list').append(data);
                registerPostEvents();
                registerScrollEvent();
                s_offset++;

                if (data === '') {
                    $('.post-container').append("<p class='no-more-posts-message'>Es konnten keine Ergebnisse (mehr) gefunden werden!</p>");
                    s_itemsLeft = false;
                }

                if (val_changed) {
                    pushSearchHistoryState();
                } else {

                }

                s_firstRun = false;
                s_running = false;
                val_changed = false;

            },
            error: console.log
        });
    }
}

function registerScrollEvent() {
    const commentList = $('.comment-list');
    $(window).scroll(function () {
        if ($(document).scrollTop() + 360 + $(window).height() >= commentList.position().top + commentList.outerHeight()) {
            searchEntries();
        }
    });
}

function newSearchQuery() {
    val_changed = true;
    s_offset = 0;
    searchEntries();
}

function pushSearchHistoryState() {
    const title = encodeURIComponent(query.val());
    const type = $('input[name=type]:checked').val();
    const rank = $('#searchForRank').val();
    const lang = $('#searchForLang').data('value');
    const country = $('#searchForCountry').data('value');

    window.history.pushState(
        {
            'postContainer': $('.post-container').html(),
            'query': title,
            'type': type,
            'rank': rank,
            'lang': lang,
            'country': country,
        },
        'Suche: ' + query.val(),
        `/posts/search?q=${title}&type=${type}${rank !== '' ? '&rank=' + rank : ''}${lang !== '' ? '&lang=' + lang : ''}${country !== '' ? '&country=' + country : ''}`
    );
}

function replaceSearchHistoryState(title, newQuery) {
    const currentState = window.history.state;
    const type = $('input[name=type]:checked').val();
    const rank = $('#searchForRank').val();
    const lang = $('#searchForLang').data('value');
    const country = $('#searchForCountry').data('value');

    window.history.replaceState(
        currentState,
        title,
        `/posts/search?q=${newQuery}&type=${type}${rank !== '' ? '&rank=' + rank : ''}${lang !== '' ? '&lang=' + lang : ''}${country !== '' ? '&country=' + country : ''}`
    );
}

window.onpopstate = (e) => {
    if (e.state) {
        $('.post-container').html(e.state.postContainer);
        $('.search-input').val(e.state.query);
        $('#searchForRank').val(e.state.rank);
        $('#searchForLang').find('.dropdown-item[data-value=' + e.state.lang + ']').click();
        $('#searchForCountry').find('.dropdown-item[data-value=' + e.state.country + ']').click();
        $('#' + e.state.type).prop('checked', true);
    }
};

$('.search-form').submit((e) => {
    e.preventDefault();
    newSearchQuery()
}).keyup(() => {
    replaceSearchHistoryState('Suche: ' + query.val(), encodeURIComponent(query.val()));
    clearTimeout(keyUpEvent);
    keyUpEvent = setTimeout(() => {
        newSearchQuery();
    }, 1000);
});

$('input[name=type]').change(() => {
    newSearchQuery();

    if ($('input[name=type]:checked').val() === 'type-users') {
        $('.user-search').slideDown();
    } else {
        $('.user-search').slideUp();
    }
});

$('.search-input').focus(function () {
    $(this).parent().addClass('focus');
}).blur(function () {
    $(this).parent().removeClass('focus');
});

$('.user-search select').change(() => {
    if ($('input[name=type]:checked').val() === 'type-users') {
        newSearchQuery();
    }
});

function initUserSearch() {
    $.ajax({
        url: '/posts/getAvailableCountries',
        success: (data) => {
            const countrySelect = $('#searchForCountry').find('.dropdown-menu');
            console.log(data);
            for(let country of data.countries) {
                countrySelect.append(`
                    <a href="#" class="dropdown-item" data-value="${country.country}">
                        <span class="flag-icon flag-icon-${country.country.toLowerCase()} squared rounded"></span>
                        ${country.name} (${country.countryUserCount})
                    </a>
                `)
            }

            initSelectDropdown();

            const urlAttribute = getUrlParameter('country');
            if(urlAttribute) {
                $('#searchForCountry').find('.dropdown-item[data-value=' + urlAttribute + ']').click();
            }
        },
        error: console.log
    });

    $.ajax({
        url: '/posts/getAvailableLanguages',
        success: (data) => {
            const langSelect = $('#searchForLang').find('.dropdown-menu');
            for (let lang of data.languages) {
                langSelect.append(`
                    <a href="#" class="dropdown-item" data-value="${lang.language}">
                        <span class="flag-icon flag-icon-${lang.language.toLowerCase()} squared rounded"></span>
                        ${lang.name} (${lang.langUserCount})
                    </aa>
                `);
            }

            initSelectDropdown();

            const urlAttribute = getUrlParameter('lang');
            if (urlAttribute) {
                $('#searchForLang').find('.dropdown-item[data-value=' + urlAttribute + ']').click();
            }
        },
        error: console.log
    });
}

function initSelectDropdown() {
    $('.user-search .dropdown .dropdown-item').click(function (e) {
        e.preventDefault();
        const text = $(this).html();
        $('.dropdown-item.active', $(this).parent()).removeClass('active');
        $(this).addClass('active');
        $('.dropdown-toggle', $(this).parent().parent()).html(text);
        $(this).parent().parent().data('value', $(this).data('value'));

        newSearchQuery();
    });
}

$(function () {
    initUserSearch();

    searchEntries();

    if ($('input[name=type]:checked').val() === 'type-users') {
        $('.user-search').show();
    }
});

function getUrlParameter(sParam) {
    const sPageURL = decodeURIComponent(window.location.search.substr(1)),
        sURLVariables = sPageURL.split('&');

    for (let urlParameter of sURLVariables) {
        const urlVariable = urlParameter.split('=');

        if (urlVariable[0] === sParam) {
            return urlVariable[1] === undefined ? true : urlVariable[1];
        }
    }
}