const SearchHandler = {

    form: document.getElementById('searchForm'),
    searchBar: document.getElementById('searchbar'),
    resultHolder: document.getElementById('searchresults'),
    searchUrl: null,

    init : function() {
        if(this.form && isset(this.form.dataset.searchUrl)) {
            this.searchUrl = this.form.dataset.searchUrl;
            let languageId = this.searchBar.dataset.languageId;
            console.debug('searchHandler initialized with searchUrl: ' + this.searchUrl);

            this.searchBar.addEventListener('keydown', debounce(function () {
                SearchHandler.search(SearchHandler.searchBar.value, 1, 5, languageId);
            }, 200));
        }
    },

    search: function(term, page = 1, amount = 10, language_id = null) {
        if(term === "") return;

        let xhr = new XMLHttpRequest();
        let token = document.querySelector('meta[name="csrf-token"]').content;

        let queryParams = {
            'term': term,
            'page': page,
            'amount': amount,
            'language_id': language_id
        };

        let queryUrlPart = '';
        for(let param in queryParams) queryUrlPart += ((queryUrlPart !== '') ? '&' : '?')+param+'='+encodeURIComponent(queryParams[param]);

        xhr.open('get', this.searchUrl+queryUrlPart, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.setRequestHeader('X-CSRF-TOKEN', token);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if(xhr.status === 200) {
                    SearchHandler.processSearchResponse(xhr.response);
                } else {
                    console.error('SearchHandler: Could not search because of an error. '+xhr.statusText);
                }
            }
        };
        xhr.send();
    },

    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();