/* ==========================================================================
    Search handler

    TODO: Rewrite this into js-classes when you're using it then commit it back to KMS plx
 ========================================================================== */

const SearchHandler = {

    form: null,
    apiRoute: null,
    searchField: null,
    resultsArea: null,
    lastSearchValue: '',

    init: function () {

        SearchHandler.searchbar = document.querySelector('.js-search');

        if (SearchHandler.searchbar) {

            SearchHandler.apiRoute = SearchHandler.searchbar.dataset.apiRoute;

            SearchHandler.searchField = SearchHandler.searchbar.querySelector('.js-search-field');
            SearchHandler.resultsArea = SearchHandler.searchbar.querySelector('.js-search-results');

            SearchHandler.searchField.addEventListener('focus', SearchHandler.typeEvent);
            SearchHandler.searchField.addEventListener('keyup', SearchHandler.typeEvent);
            SearchHandler.searchField.addEventListener('keypress', debounce(SearchHandler.searchEvent, 300));

            // If there is a click on the document
            document.addEventListener('click', function (event) {

                // And if it's outside the searchbar we close it (else we probably click on a search result :)
                const isClickInside = SearchHandler.searchbar.contains(event.target);
                if(!isClickInside) SearchHandler.resultsArea.hidden = true;
            });

        }
    },

    typeEvent: function (event) {
        const searchValue = SearchHandler.searchField.value;

        SearchHandler.resultsArea.hidden = false;

        if(searchValue !== SearchHandler.lastSearchValue) {
            SearchHandler.showNoResultMessage(searchValue);
        }
    },

    searchEvent: async function (event) {

        const searchValue = SearchHandler.searchField.value;

        // We need atleast 3 characters
        if(searchValue.length <= 3) return;

        SearchHandler.lastSearchValue = searchValue;

        const searchResultCategories = await SearchHandler.search(searchValue);

        if(searchResultCategories.length <= 0) {
            return;
        }

        let resultHtml = '';

        Object.keys(searchResultCategories).forEach( key => {

            const resultsForCategory = searchResultCategories[key];

            resultsForCategory.forEach( result => {
                resultHtml += '<a class="c-searchbar__result" href="' + result.route + '">' + result.name + '<span class="c-searchbar__result-category">in ' + result.typeName +  '</span></a>';
            });
        });

        SearchHandler.resultsArea.innerHTML = resultHtml;
    },

    search: function (query) {
        return new Promise(function(resolve, reject) {
            Ajax.post(
                SearchHandler.apiRoute,
                {query: query},
                function (xhr) {

                    if(xhr.status !== 200) {
                        reject();
                    }

                    const response = JSON.parse(xhr.response);
                    resolve(response);
                }
            );
        });
    },

    showNoResultMessage: function(term) {

        SearchHandler.lastSearchValue = term;

        const noResultHref = SearchHandler.searchbar.action + "?" + SearchHandler.searchField.name + "=" + term;
        SearchHandler.resultsArea.innerHTML = "<a class='c-searchbar__no-results' href='" + noResultHref + "'>" + SearchHandler.resultsArea.dataset.noResult + " <strong>" + term + "</strong></a>";
    },

    processSearchResponse: function (response) {
        if (!SearchHandler.validateSearchResponse(response)) return;
        if (typeof response.data !== 'undefined' && response.data.length > 0) {
            while (this.resultHolder.children.length > 0) {
                this.resultHolder.removeChild(this.resultHolder.firstChild);
            }

            console.log(response.data);
            length = response.data.length;
            let items = [];

            for (let index = 0; index < length; index++) {
                console.log(response.data[index]);
                let item = {
                    id: response.data[index].id,
                    type: response.data[index].type,
                    name: response.data[index].attributes.translation[0].attributes.name,
                };
                items.push(item);
            }

            this.resultHolder.appendChild(document.createElement('ul'));

            for (let index = 0; index < length; index++) {
                let element = document.createElement('li');
                element.setAttribute('data-id', items[index].id);
                element.setAttribute('data-type', items[index].type);
                element.innerText = items[index].name;

                this.resultHolder.children[0].appendChild(element);
            }
        } else {
            while (this.resultHolder.children.length > 0) {
                this.resultHolder.removeChild(this.resultHolder.firstChild);
            }
            this.resultHolder.innerHTML = "<p>Geen zoekresultaten</p>";
        }
    },

    validateSearchResponse: function (response) {
        if (
            isset(response) &&
            response.hasOwnProperty('data') &&
            response.hasOwnProperty('meta')
        ) return response;

        console.error('Search response was not valid');
        return false;
    }
};

SearchHandler.init();