const startingSlide = "#quick-picks-slide";

function initInteractiveElements() {
    let configurationToggle = document.getElementById("configuration-toggle");
    let configurationElem = document.getElementById("configuration");
    configurationElem.addEventListener("show.bs.collapse", function () {
        configurationToggle.classList.add("active");
    });
    configurationElem.addEventListener("hidden.bs.collapse", function () {
        configurationToggle.classList.remove("active");
    });
}

function initConfigVisuals() {
    const minRatingDisplay = document.querySelector("#configuration #min-rating-display");
    const minRatingSlider = document.querySelector("#configuration #min-rating");
    const updateDisplay = function () {
        minRatingDisplay.innerHTML = `Minimum rating: ${minRatingSlider.value}%`;
    };
    minRatingSlider.addEventListener("input", updateDisplay);
    updateDisplay();
}

function initSlides() {
    document.querySelectorAll("#content-pages > .selectors > .nav-item > button").forEach(tabElem => {
        tabElem.addEventListener("click", () => {
            const destUrl = new URL(tabElem.getAttribute("data-bs-target"), window.location.href);
            if (location.href === destUrl.href) return;
            history.pushState({}, document.title, destUrl);
        });
    });
    const goTo = () => {
        const match = location.href.match("(#[\\w-]+)");
        const idAnchor = match && match[1] ? match[1] : startingSlide;
        document.querySelector("#content-pages > .selectors > .nav-item > .active")?.classList.remove("active");
        document.querySelector("#content-pages > .multipage-slides > .active.show")?.classList.remove("active", "show");
        document.querySelector(`#content-pages > .selectors > .nav-item > [data-bs-target="${idAnchor}"]`).classList.add("active");
        document.querySelector(`#content-pages > .multipage-slides > ${idAnchor}`).classList.add("active", "show");
    };
    window.addEventListener("popstate", goTo);
    goTo();

    require("bootstrap/js/dist/tab.js");
    document.querySelector("#content-pages").classList.remove("invisible");
}

async function main() {
    initInteractiveElements();
    initConfigVisuals();
    initSlides();
}

main();