import Alpine from "alpinejs";
import { apiHttp } from "~/assets/js/services/http.js";

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");
    });
}

async function initConfigurationData() {
    const givenConfig = (await apiHttp.get("/SearchOutline/Filters")).data;
    const disabledShops = (await apiHttp.get("/SearchOutline/DisabledShops")).data;
    const availableShops = (await apiHttp.get("/Search/Available")).data;
    document.addEventListener("alpine:init", () => {
        Alpine.data("configuration", () => {
            const configuration = {
                maxPriceEnabled: givenConfig.enableUpperPrice,
                maxPrice: givenConfig.upperPrice,
                minPrice: givenConfig.lowerPrice,
                maxShippingEnabled: givenConfig.enableMaxShippingFee,
                maxShipping: givenConfig.maxShippingFee,
                keepUnknownShipping: givenConfig.keepUnknownShipping,
                minRating: givenConfig.minRating * 100,
                keepUnrated: givenConfig.keepUnrated,
                minReviews: givenConfig.minReviews,
                keepUnknownReviews: givenConfig.keepUnknownReviewCount,
                keepUnknownPurchases: givenConfig.keepUnknownPurchaseCount,
                minPurchases: givenConfig.minPurchases,
                shops: {},
            };
            availableShops.forEach(shop => {
                configuration.shops[shop] = !disabledShops.includes(shop);
            });
            return configuration;
        });
    });
}

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();
    await initConfigurationData();
    initSlides();
    Alpine.start();
}

main();