OSU Navbar

function initOsuNav(navRoot: HTMLElement) {
    const triggerButton = navRoot.querySelector<HTMLButtonElement>("#osu-nav-trigger");
    const navLinks = [...navRoot.querySelectorAll<HTMLAnchorElement>(".bux-osu-nav__link > a")];
    const overlay = navRoot.querySelector<HTMLElement>(".bux-osu-nav__overlay");
    const navMenu = navRoot.querySelector<HTMLElement>("#osu-navlinks-block");

    const navContainer = document.querySelector<HTMLElement>("#osu-navlinks");

    if (!triggerButton || !overlay || !navMenu || !navContainer) {
        console.error("Buckeye UX OSU Navbar: Required elements missing in instance", navRoot);
        return;
    }

    let isMobile = false;
    let isOpen = false;

    const openMenu = () => {
        triggerButton.setAttribute("aria-expanded", "true");
        navMenu.setAttribute("aria-modal", "true");
        overlay.style.display = "block";

        const menuLinksHeight = navContainer ? (navContainer.clientHeight - 55) : 0;
        navRoot.style.marginBottom = `${menuLinksHeight}px`;

        isOpen = true;
    };

    const closeMenu = () => {
        triggerButton.setAttribute("aria-expanded", "false");
        navMenu.removeAttribute("aria-modal");
        overlay.style.display = "none";
        navRoot.style.marginBottom = "0";

        isOpen = false;
        triggerButton.focus();
    };

    const toggleMenu = () => {
        const isExpanded = triggerButton.getAttribute("aria-expanded") === "true";
        return isExpanded ? closeMenu() : openMenu();
    };

    const updateViewportState = () => {
        const triggerStyle = globalThis.getComputedStyle(triggerButton);
        const currentlyMobile = triggerStyle.display !== "none";

        if (isMobile !== currentlyMobile) {
            isMobile = currentlyMobile;

            if (isMobile) {
                navRoot.setAttribute("aria-labelledby", "osu-nav-trigger");
            } else {
                navRoot.removeAttribute("aria-labelledby");
                closeMenu();
            }
        }
    };

    const handleTriggerKeydown = (event: KeyboardEvent) => {
        switch (event.key) {
            case 'Enter': {
                event.preventDefault();
                toggleMenu();
                break;
            }
            case 'Escape': {
                closeMenu();
                break;
            }
            case 'Tab': {
                if (event.shiftKey && isOpen) {
                    event.preventDefault();
                    if (navLinks.length > 0) {
                        const previousNavLink = navLinks.at(-1);
                        if (previousNavLink) {
                            previousNavLink.focus();
                        }
                    }
                }
                break;
            }
        }
    };

    const handleNavKeydown = (event: KeyboardEvent) => {
        if (!isMobile) return;

        switch (event.key) {
            case 'Escape': {
                closeMenu();
                break;
            }
            case 'Tab': {
                const lastLink = navLinks.at(-1);
                if (event.target === lastLink && !event.shiftKey) {
                    event.preventDefault();
                    triggerButton.focus();
                }
                break;
            }
        }
    };

    triggerButton.addEventListener("click", () => toggleMenu());
    triggerButton.addEventListener("keydown", handleTriggerKeydown);
    navRoot.addEventListener("keydown", handleNavKeydown);
    overlay.addEventListener("click", closeMenu);

    window.addEventListener("resize", updateViewportState);
    updateViewportState();
}

const navs = document.querySelectorAll(".bux-osu-nav");
if (navs.length > 0) {
    for (const nav of navs) {
        if (nav instanceof HTMLElement) {
            initOsuNav(nav);
        }
    }
}