const minimalLengthSearchTerm = 2;
const maxItems = 10;
const idSearchInput = "js-search";
let typingTimer;
let filters = [];
document.addEventListener("DOMContentLoaded", () => {
    initSearchHeader();
});
function initSearchHeader() {
    const element = document.getElementById(idSearchInput);
    if (element !== null) {
        element.addEventListener('keyup', initTypingTimer, false);
    }
    const filterList = document.getElementById('js-search-suggestions-filters');
    if (filterList !== null) {
        const filters = filterList.querySelectorAll('button');
        filters.forEach(x => x.addEventListener('click', toggleFilter))        
    }
}
function initTypingTimer() {
    clearTimeout(typingTimer);
    typingTimer = window.setTimeout(hitApi, 1000);
}
const hitApi = () => {
    const lang = document.querySelector("meta[name='culture']")
        .getAttribute("content");
    const element = document.getElementById(idSearchInput);
    const elementSuggestions = document.getElementById("js-search-suggestions-topsearchresults");
    const elementSearchResults = document.getElementById("js-search-suggestions-searchresults");
    const elementSearchResultItems = document.getElementById("js-search-header-resultitems");
    if (element.value.length > minimalLengthSearchTerm) {
        if (elementSuggestions !== null) {
            elementSuggestions.classList.add('d-none');
        }
        elementSearchResults.classList.remove('d-none');
        const xhr = new XMLHttpRequest();
        let url = `/Umbraco/Api/SearchresultsApi/search?searchTerm=${element.value}&maxitems=${maxItems}&lang=${lang}`;
        if (filters.length > 0) {
            url += '&filters=' + encodeURIComponent(filters.join(','))
        }
        xhr.open('GET', url);
        xhr.send();
        xhr.responseType = "json";
        xhr.onload = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.response.results.length) {
                    elementSearchResultItems.innerHTML = '';
                    xhr.response.results.forEach((item) => {
                        elementSearchResultItems.innerHTML +=
                            `<li>
                            <a href="${item.url}" class="menu-bar-nav__search-suggestions-link d-block text-decoration-none">
                                ${item.title}
                            </a>
                            </li>`
                    });
                }
                else {
                    elementSearchResultItems.innerHTML =
                        `<li class="menu-bar-nav__search-suggestions-item js-search-header-noresults">
                            ${xhr.response.noResults}
                        </li>`
                }
            } else {
                console.log(`Error: ${xhr.status}`);
            }
        };
    }
    else {
        if (elementSuggestions !== null) {
            elementSuggestions.classList.remove('d-none');
        }
        elementSearchResults.classList.add('d-none');
    }
}
const toggleFilter = (e) => {
    e.target.classList.toggle('--selected');
    const filter = e.target.dataset.filter;
    if (!filter) return;
    const index = filters.indexOf(filter);
    index > -1 ? filters.splice(index, 1) : filters.push(filter);
    const filterInput = document.getElementById('js-filter');
    if (filterInput) {
        filterInput.value = filters.join(',');
    }
    hitApi();
};