const buttons = document.querySelectorAll('.sidebar-button');

function findKeyByValue(obj, value) {
    return Object.keys(obj).find(key => obj[key] === value);
}


function setActiveButton(button) {

    buttons.forEach(btn => btn.classList.remove('active'));

    button.classList.add('active');
}


function get_and_update(search_text) {

    const url = `/searchinput/?query=${encodeURIComponent(search_text)}`;

    fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error(`Network error: ${response.status}`);
            }
            return response.json();
        })
        .then((data) => {
            const serverdata = data.results;
            if (Object.prototype.toString.call(serverdata) === "[object Object]") {

                lstBeispiel = serverdata.lstBeispiel;
                const verb_first = serverdata.verb_first;
                let sdbtn_id = findKeyByValue(sdbtn_names_db, verb_first);
                const currentbtn = document.getElementById(sdbtn_id);
                setActiveButton(currentbtn);

                updatepage(serverdata);

                document.getElementById('search-input').value = '';
            }

        });
}


document.getElementById("search-input").addEventListener("input", function () {

    const query = this.value;

    if (query.length > 2) {

        fetch(`/autocomplete/?query=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {

                const resultsContainer = document.getElementById("autocomplete-results");
                resultsContainer.style.display = "block";
                resultsContainer.innerHTML = data.results
                    .map(item => `<li class="autocomplete-item" class="search-suggestions">${item}</li>`)
                    .join("");

                document.querySelectorAll('.autocomplete-item').forEach(item => {
                    item.addEventListener('click', () => {
                        document.getElementById("search-input").value = item.textContent;
                        resultsContainer.style.display = "none";

                        get_and_update(item.textContent);
                    });
                });
            });
    }
});


document.addEventListener("click", function (event) {
    if (!event.target.closest("#autocomplete-results")) {
        document.getElementById("autocomplete-results").style.display = "none";
    }
});