const searchBarTemplate =
    `<div id="appSearchInputContainer" class="app-search-input-container">
    <div class="app-search-icon"></div>
    <input type="text" class="app-search-input" aria-label="Search Broker Portal" placeholder="Search"
        autocomplete="off" autocorrect="off" autocapitalize="off" id="appSearchInput" />
    <a href="javascript:void(0)" id="appSearchClearLink" class="app-search-clear-link d-none">
        <div id="appSearchClearIcon" class="app-search-clear-icon"></div>
    </a>
</div>`;

const searchPanelTemplate =
    `<div class="app-search-results-panel-content">
    <ul id="appSearchResultsList" class="app-search-results-list"></ul>
</div>`;

const searchModalTemplate =
    `<div class="app-search-results-modal-content">
    <div class="app-search-results-modal-header">
        <div class="app-search-icon"></div>
        <input type="text" class="app-search-input" aria-label="Search Broker Portal" placeholder="Search"
            autocomplete="off" autocorrect="off" autocapitalize="off" id="appSearchResultsInput" />
        <a href="javascript:void(0)" class="app-search-clear-link">
            <div id="appSearchResultsCloseIcon" class="app-search-clear-icon"></div>
        </a>
    </div>
    <div class="app-search-results-modal-body">
        <ul id="appSearchResultsModalList" class="app-search-results-list"></ul>
    </div>
    <div class="app-search-results-modal-footer">
        <div class="app-search-results-summary"></div>
        <div class="app-search-results-pagination">
            <ul id="appSearchPaginationList" class="app-search-results-pagination-list">
            </ul>
        </div>
        <div class="app-search-results-note">Type and ENTER to update search results</div>
    </div>
</div>`;

let appSearchResults = [];
let currentPage = 1;
let totalResults = 10;
let showPrevNext = false;

// Try loading the script from component, if wcm works fine directly.
let elCheckCounter = 0;
const elCheckInterval = setInterval(() => {
    if (document.getElementById('appSearchContainer') || elCheckCounter > 10) {
        document.getElementById('appSearchContainer').innerHTML = searchBarTemplate;
        setAppSearchEventListeners();
        clearInterval(elCheckInterval);
    }
}, 1000);

const walkMeElCheckInterval = setInterval(() => {
    if (document.getElementById('appSearchContainer') || elCheckCounter > 10) {
        if (document.getElementById('appSearchContainer').querySelectorAll("[class*='walkme']")) {
            document.getElementById('appSearchContainer').querySelectorAll("[class*='walkme']").forEach(el => el.remove());
        }
        clearInterval(walkMeElCheckInterval);
    }
}, 2000);

const renderSearchResultsPanel = () => {
    if (appSearchResults.length > 0 && document.getElementsByClassName('app-search-results-panel').length === 0) {
        const temp0 = document.createElement('div');
        temp0.classList.add('app-search-results-panel');
        temp0.innerHTML = searchPanelTemplate;
        document.getElementById('appSearchContainer').parentElement.append(temp0);
    }
    if (document.getElementById('appSearchResultsList')?.childElementCount === 0) {
        appSearchResults.forEach(res => {
            const el = document.createElement('li');
            el.classList.add('app-search-result-item');
            el.innerHTML = `<a class="app-search-result-item-link" href="${res.url?.raw}">
    <h6 class="app-search-result-item-title">${(res.title?.snippet || res.title?.raw || '')}</h6>
    <div class="app-search-result-item-content">${res.body_content?.snippet || res.body_content?.snippet || res.url?.raw}</div>
</a>`;
            document.getElementById('appSearchResultsList').append(el);
        });
    }
    if (appSearchResults.length === 0) {
        if (document.getElementsByClassName('app-search-results-panel-content').length > 0) {
            document.getElementsByClassName('app-search-results-panel-content')[0].classList.add('no-results');
        }
    } else {
        document.getElementsByClassName('app-search-results-panel-content')[0].classList.remove('no-results');
    }
}

const appendAppSearchResultsModal = () => {
    const temp1 = document.createElement('div');
    const temp2 = document.createElement('div');
    temp1.classList.add('app-search-results-modal');
    temp1.innerHTML = searchModalTemplate;
    temp2.classList.add('app-search-results-modal-backdrop');
    temp2.classList.add('show');
    document.getElementById('appSearchContainer').parentElement.append(temp1);
    document.getElementById('appSearchContainer').parentElement.append(temp2);
    document.body.classList.add('app-search-modal-active');
}

const renderAppSearchResultsList = () => {
    document.getElementById('appSearchResultsList')?.replaceChildren();
    setTimeout(() => {
        document.getElementById('appSearchInput').blur();
        document.getElementsByClassName('app-search-results-panel')[0]?.classList.add('d-none');
    }, 100);
    if (document.getElementsByClassName('app-search-results-modal').length === 0) {
        appendAppSearchResultsModal();
        document.getElementById('appSearchResultsInput').value = document.getElementById('appSearchInput').value;
    }
    document.getElementById('appSearchResultsInput').focus();
    updatePagination();
    appSearchResults.forEach(res => {
        const el = document.createElement('li');
        el.classList.add('app-search-results-list-item');
        el.innerHTML = `<a class="app-search-results-list-item-link" href="${res.url?.raw}">
    <h6 class="app-search-result-item-title">${(res.title?.snippet || res.title?.raw || '')}</h6>
    <div class="app-search-result-item-content"><span class="app-search-result-item-content-time">${res.last_crawled_at?.raw ? (new Date(res.last_crawled_at?.raw)?.toISOString()?.replace('.000', '') || '') : ''}</span> • ${res.body_content?.snippet || res.body_content?.raw || res.url?.raw}</div>
</a>`;
        document.getElementById('appSearchResultsModalList').append(el);
    });
}

function updatePagination() {
    document.getElementById('appSearchPaginationList').replaceChildren();
    const input = document.getElementById('appSearchResultsInput').value;
    const totalPages = Math.ceil(totalResults / 10);
    if (totalResults === 0) {
        document.getElementsByClassName('app-search-results-summary')[0].innerHTML = `No results found for “${input}”`;
    } else if (currentPage === totalPages) {
        document.getElementsByClassName('app-search-results-summary')[0].innerHTML = `Showing ${((currentPage - 1) * 10) +
            1}–${totalResults} of ${totalResults} for “${input}”`;
    } else {
        document.getElementsByClassName('app-search-results-summary')[0].innerHTML = `Showing ${((currentPage - 1) * 10) +
            1}–${currentPage * 10} of ${totalResults} for “${input}”`;
    }
    if (totalResults > 0) {
        if (totalPages < 5) {
            for (let i = 0; i < totalPages; i++) {
                const el = document.createElement('li');
                el.classList.add('app-search-results-pagination-list-item'); el.setAttribute('id', 'pageNumber' + (i + 1)); const
                    pageNumberClicked = i + 1; el.innerHTML = `<a href="javascript:changePage(` + pageNumberClicked + `)">${i + 1}</a>`;
                document.getElementById('appSearchPaginationList').append(el);
            }
        } else {
            if (currentPage === 1) {
                for (let i = 0; i < 5; i++) {
                    const el = document.createElement('li');
                    el.classList.add('app-search-results-pagination-list-item'); el.setAttribute('id', 'pageNumber' + (i + 1));
                    const pageNumberClicked = i + 1; el.innerHTML = `<a href="javascript:changePage(` + pageNumberClicked + `)">${i +
                        1}</a>`;
                    document.getElementById('appSearchPaginationList').append(el);
                }
            } else {
                const el = document.createElement('li');
                el.classList.add('app-search-results-pagination-list-item');
                el.setAttribute('id', 'previous');
                el.innerHTML = `<a href="javascript:changePage(` + (currentPage - 1) + `)">
            < Previous</a>`;
                document.getElementById('appSearchPaginationList').append(el);
                const startIndex = (totalPages - 3 >= currentPage) ? (currentPage - 2) : (totalPages - 5);
                const endIndex = (totalPages - 3 >= currentPage) ? (currentPage + 3) : totalPages;
                for (let i = startIndex; i < endIndex; i++) {
                    const el = document.createElement('li');
                    el.classList.add('app-search-results-pagination-list-item'); el.setAttribute('id', 'pageNumber' + (i
                        + 1)); const pageNumberClicked = i + 1; el.innerHTML = `<a
                    href="javascript:changePage(` + pageNumberClicked + `)">${i + 1}
        </a>`;
                    document.getElementById('appSearchPaginationList').append(el);
                }
            }
            if (currentPage !== totalPages) {
                const el = document.createElement('li');
                el.classList.add('app-search-results-pagination-list-item');
                el.setAttribute('id', 'next');
                el.innerHTML = `<a href="javascript:changePage(` + (currentPage + 1) + `)">Next ></a>`;
                document.getElementById('appSearchPaginationList').append(el);
            }
        }
        const id = "pageNumber" + currentPage;
        document.getElementById(id).innerHTML = `<a style='text-decoration: underline !important;color: #25282a;'>${currentPage}</a>`;
    }
}

function setAppSearchEventListeners() {

    document.addEventListener('click', (event) => {
        if (!document.getElementById('appSearchInputContainer').contains(event.target)) {
            document.getElementById('appSearchInputContainer').blur();
            document.getElementById('appSearchInput').blur();
            document.getElementsByClassName('app-search-clear-link')[0].blur();
            (document.getElementsByClassName('app-search-clear-link')[0]).classList.add('d-none');
            if (document.getElementById('appSearchInput') !== document.activeElement &&
                document.getElementsByClassName('app-search-input-container').length > 0) {
                document.getElementsByClassName('app-search-input-container')[0].style.width = '50%';
                if (document.getElementsByClassName('app-search-results-panel')[0]) {
                    document.getElementsByClassName('app-search-results-panel')[0].classList.add('d-none');
                }
            }
        }
    });

    document.getElementById('appSearchInput').addEventListener('focus', () => {
        (document.getElementsByClassName('app-search-clear-link')[0]).classList.remove('d-none');
    });

    document.getElementById('appSearchInputContainer').addEventListener('blur', () => {
        document.getElementById('appSearchInput').blur();
        document.getElementsByClassName('app-search-clear-link')[0].blur();
        (document.getElementsByClassName('app-search-clear-link')[0]).classList.add('d-none');
        if (document.getElementById('appSearchInput') !== document.activeElement &&
            document.getElementsByClassName('app-search-input-container').length > 0) {
            document.getElementsByClassName('app-search-input-container')[0].style.width = '50%';
            if (document.getElementsByClassName('app-search-results-panel')[0]) {
                document.getElementsByClassName('app-search-results-panel')[0].classList.add('d-none');
            }
        }
    });

    document.getElementById('appSearchInputContainer').addEventListener('focusout', () => {
        document.getElementById('appSearchInput').blur();
        document.getElementsByClassName('app-search-clear-link')[0].blur();
        (document.getElementsByClassName('app-search-clear-link')[0]).classList.add('d-none');
        if (document.getElementById('appSearchInput') !== document.activeElement &&
            document.getElementsByClassName('app-search-input-container').length > 0) {
            document.getElementsByClassName('app-search-input-container')[0].style.width = '50%';
            if (document.getElementsByClassName('app-search-results-panel')[0]) {
                document.getElementsByClassName('app-search-results-panel')[0].classList.add('d-none');
            }
        }
    });

    ['keyup',/*  'keydown', */ 'focus'].forEach(evt => {
        document.getElementById('appSearchInput').addEventListener(evt, (event) => {
            if (document.getElementById('appSearchInput') === document.activeElement &&
                document.getElementsByClassName('app-search-input-container').length > 0) {
                document.getElementsByClassName('app-search-input-container')[0].style.width = '100%';
            }
            if (evt === 'keyup' && (event.key === 'Enter' || event.keyCode === 13)) {
                if (event.target.value.length === 0) {
                    changePage(1);
                }
                renderAppSearchResultsList();
                setAppSearchResultsModalEvents();
                document.getElementsByClassName('app-search-input-container')[0].style.width = '50%';
                (document.getElementsByClassName('app-search-clear-link')[0]).classList.add('d-none');
            }
            if ((evt === 'keyup' || evt === 'keydown') && event.target.value.length > 0) {
                const input = document.getElementById('appSearchInput').value;
                fetchAppSearchResults(input, 1);
            }
            if (document.getElementsByClassName('app-search-results-panel').length > 0 && event.target.value.length === 0) {
                document.getElementsByClassName('app-search-results-panel')[0].classList.add('d-none');
                document.getElementById('appSearchResultsList')?.replaceChildren();
                appSearchResults = [];
            } else if (event.target.value.length > 0 && document.getElementsByClassName('app-search-results-panel')[0]) {
                document.getElementsByClassName('app-search-results-panel')[0].classList.remove('d-none');
            }
        });
    });

    document.getElementById('appSearchClearLink').addEventListener('click', () => {
        document.getElementById('appSearchInput').value = '';
        document.getElementsByClassName('app-search-clear-link')[0].blur();
        (document.getElementsByClassName('app-search-clear-link')[0]).classList.add('d-none');
        document.getElementById('appSearchResultsList')?.replaceChildren();
        document.getElementById('appSearchResultsModalList')?.replaceChildren();
        if (document.getElementById('appSearchInput') !== document.activeElement &&
            document.getElementsByClassName('app-search-input-container').length > 0) {
            document.getElementsByClassName('app-search-input-container')[0].style.width = '50%';
        }
        if (document.getElementsByClassName('app-search-results-panel')[0]) {
            document.getElementsByClassName('app-search-results-panel')[0].classList.add('d-none');
        }
    });

}

function setAppSearchResultsModalEvents() {

    document.getElementById('appSearchResultsInput').addEventListener('keyup', (event) => {
        if (event.key === 'Enter' || event.keyCode === 13) {
            document.getElementById('appSearchResultsInput')?.value
            changePage(1);
        }
    });

    document.getElementById('appSearchResultsCloseIcon').addEventListener('click', () => {
        document.getElementsByClassName('app-search-results-modal')[0].remove();
        document.getElementsByClassName('app-search-results-modal-backdrop')[0].remove();
        document.body.classList.remove('app-search-modal-active');
    });
}

const result_fields = {
    last_crawled_at: { raw: {} },
    body_content: { raw: {}, snippet: { size: 1000, fallback: true } },
    title: { raw: {}, snippet: { size: 1000, fallback: true } },
    url: { raw: {} },
    id: { raw: {} }
}

let searchKey = 'search-9u2n8ycf8sqhwki4dr4im48f';
let searchEndpoint = 'https://bsc-elasticcloud-npe.ent.westus2.azure.elastic-cloud.com/api/as/v1/engines/broker-connection-v1/search';

if (location.host === 'www.blueshieldca.com') {
    searchKey = 'search-djvwj8yssbq9riwabtcgecgv';
    searchEndpoint = 'https://bsc-elasticcloud.ent.westus2.azure.elastic-cloud.com/api/as/v1/engines/broker/search';
}

function fetchAppSearchResults(queryString, pageNumber) {
    const request = {
        query: queryString,
        result_fields: result_fields,
        page: {
            size: 10,
            current: pageNumber
        }
    }
    fetch(searchEndpoint,
        {
            method: 'POST',
            cache: 'no-cache',
            headers: {
                'Content-Type': "application/json",
                'Authorization': "Bearer " + searchKey
            },
            body: JSON.stringify(request)
        }).then(response => response.json())
        .then(res => {
            document.getElementById('appSearchResultsList')?.replaceChildren();
            appSearchResults = res.results;
            currentPage = res.meta.page.current;
            totalResults = res.meta.page.total_results;
            renderSearchResultsPanel();
        });
}

function changePage(pageNumberClicked) {
    const input = document.getElementById('appSearchResultsInput')?.value || '';
    const request = {
        query: input,
        result_fields: result_fields,
        page: {
            size: 10,
            current: pageNumberClicked
        }
    }
    fetch(searchEndpoint,
        {
            method: 'POST',
            cache: 'no-cache',
            headers: {
                'Content-Type': "application/json",
                'Authorization': "Bearer " + searchKey
            },
            body: JSON.stringify(request)
        }).then(response => response.json())
        .then(res => {
            appSearchResults = res.results;
            currentPage = res.meta.page.current;
            totalResults = res.meta.page.total_results;
            document.getElementById('appSearchResultsModalList')?.replaceChildren();
            renderAppSearchResultsList();
        });
}