(function () {
    // SELECTORS
    const searchButton = document.querySelector(".search-trigger"),
          closeButton = document.querySelector(".search-overlay__close"),
          searchOverlay = document.querySelector(".search-overlay"),
          searchField = document.querySelector('#search-term'),
          resultsDiv = document.querySelector('#search-overlay__results'),
          body = document.body;
          postsRequest = fetch(`${universityData.root_url}/wp-json/wp/v2/posts/?search=${searchField.value}`);
          pagesRequest = fetch(`${universityData.root_url}/wp-json/wp/v2/pages/?search=${searchField.value}`);




    let isOverlayOpen = false,
        isSpinnerVisable = false,
        typingTimer, previousValue;

    // ACTIONS
    const events = {
        keyPressDispatcher (e) {
            //too many future conflicts with s = search, poor design practice
            if (e.keyCode === 27 && isOverlayOpen) events.closeOverlay();
        },

        openOverlay() {
            searchOverlay.classList.add("search-overlay--active");
            body.classList.add("body-no-scroll");
            setTimeout(() => searchField.focus(), 301);
            isOverlayOpen = true;
        },

        closeOverlay() {
            searchOverlay.classList.remove("search-overlay--active");
            body.classList.remove("body-no-scroll");
            isOverlayOpen = false;
        },

        typingLogic() {
            if(searchField.value != previousValue) {
                clearTimeout(typingTimer);
                if(searchField.value) {
                    if(!isSpinnerVisable) {
                        resultsDiv.innerHTML = '<div class="spinner-loader"></div>';
                        isSpinnerVisable = true;
                    }
                    typingTimer = setTimeout(() => events.getResults(), 750);
                } else {
                    resultsDiv.innerHTML = '';
                    isSpinnerVisable = false;
                }
            }
            previousValue = searchField.value;
        },

        getResults() {
                fetchURLs();
                async function fetchURLs() {
                    try {
                      let data = await Promise.all([
                        fetch(`${universityData.root_url}/wp-json/wp/v2/posts/?search=${searchField.value}`).then((response) => response.json()),
                        fetch(`${universityData.root_url}/wp-json/wp/v2/pages/?search=${searchField.value}`).then((response) => response.json())
                      ]);

                      resultsDiv.innerHTML = `
                        <h2 class="search-overlay__section-title">General Information</h2>
                        <ul class="link-list min-list">
                            ${!data[0].length && !data[1].length ? `<p>No General Information Matches That Search<p>` :
                            `${data[0].map(arr => `<li><a href="${arr.link}">${arr.title.rendered}</a></li>`).join(''). concat(data[1].map(arr => `<li><a href="${arr.link}">${arr.title.rendered}</a></li>`).join(''))}
                        </ul> `}
                    `;
                    } catch (error) {
                        resultsDiv.innerHTML = `<p>There was a problem with the search.<p>`;
                    }
                    isSpinnerVisable = false;
                  }
            }


    // EVENTS
    searchButton.addEventListener('click', events.openOverlay);
    closeButton.addEventListener('click', events.closeOverlay);
    searchField.addEventListener('keyup', events.typingLogic);
    document.addEventListener('keydown', events.keyPressDispatcher);
})();