import { Collapse, Offcanvas } from "bootstrap";

// * Menu Bar
document.addEventListener("DOMContentLoaded", function () {
    const menuBarBtn = document.getElementById("menu-bar")?.querySelector("button"),
        mainMenu = document.getElementById("main-menu"),
        header = document.querySelector("body > header") as HTMLElement | null;

    if (menuBarBtn && mainMenu && header) {
        const offCanvas = new Offcanvas(mainMenu);
        mainMenu.addEventListener("hide.bs.offcanvas", () => {
            header.classList.remove("hide-header-bg");
        });
        mainMenu.addEventListener("hidden.bs.offcanvas", () => {
            menuBarBtn.ariaExpanded = "false";
        });
        mainMenu.addEventListener("show.bs.offcanvas", () => {
            header.classList.add("hide-header-bg");
        });
        mainMenu.addEventListener("shown.bs.offcanvas", () => {
            menuBarBtn.ariaExpanded = "true";
        });
        menuBarBtn.addEventListener("click", () => {
            if (menuBarBtn.ariaExpanded === "true") {
                // Oppened
                offCanvas.hide();
            } else {
                // Closed
                offCanvas.show();
            }
        });
    }
});

// * Stickies on mobile.
document.addEventListener("DOMContentLoaded", function () {
    const stickyDiv = document.getElementById("sticky-blocks") as HTMLDivElement;
    if (stickyDiv) {
        stickyDiv.style.display = "none";

        document.onscroll = function () {
            const stickyDisplayerDiv = document.getElementById("sticky-displayer") as HTMLDivElement;

            if (stickyDisplayerDiv) {
                const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
                if (scrollTop < stickyDisplayerDiv.offsetTop - 100) {
                    stickyDiv.style.display = "none";
                } else {
                    stickyDiv.style.display = "block";
                }
            }
        };
    }
});

// * Search Bar
document.addEventListener("DOMContentLoaded", function () {
    const searchBarBtn = document.getElementById("search-bar")?.querySelector("button"),
        inputSearchBoxWrapper = document.getElementById("search-textbox-wrapper");

    // * Search bar collapser
    if (inputSearchBoxWrapper && searchBarBtn) {
        const searchCollapser = new Collapse(inputSearchBoxWrapper, {
            toggle: false
        });
        inputSearchBoxWrapper.addEventListener("hidden.bs.collapse", () => {searchBarBtn.ariaExpanded = "false";});
        inputSearchBoxWrapper.addEventListener("shown.bs.collapse", () => {searchBarBtn.ariaExpanded = "true";});
        searchBarBtn.addEventListener("click", () => {
            if (searchBarBtn.ariaExpanded === "true") {
                // Oppened
                searchCollapser.hide();
                setTimeout(() => {
                    searchBarBtn.classList.add("rounded-pill");
                    searchBarBtn.classList.remove("rounded-start-pill");
                }, 300);
            } else {
                // Closed
                searchBarBtn.classList.remove("rounded-pill");
                searchBarBtn.classList.add("rounded-start-pill");
                setTimeout(() => {
                    searchCollapser.show();
                }, 60);
            }
        });
    }
});