Main navigation: Mega Menu

import {
    blockRapidClicks,
    createID,
    debounce,
    delay,
    firstFocusableElement,
    getDocument,
    getWindow,
    toBool
} from "@gov-design-system-ce/utils";

// Matches the `lg` breakpoint (64em / 1024px) the header stylesheet switches
// its mobile layout at — NOT `md`. A first-level navigation row does not
// reliably fit into a tablet width, so the hamburger runs up to 1023px.
// Kept in px because it is compared against `window.innerWidth`; with a
// zoomed root font size this drifts from the em-based media query.
const TABLET_SIZE = 1024;
const LAST_VISIBLE_ITEM_CLASS = 'gov-navigation__last-visible-item';
let windowWidth = window.innerWidth;

class MainNavigation {
    rootElement: Element;

    constructor(rootElement: Element) {
        this.rootElement = rootElement;
        this.verifyAndFixAccessibility(this.rootUlElement);

        this.calculateSizeOfElements();
        this.registerListeners();
        this.accessibilityMobileNavigation().catch();

        if (getWindow().innerWidth >= TABLET_SIZE) {
            this.moveDeferredItems().catch()
            this.controlHeaderNavigation();
        } else {
            this.controlHeaderNavigation(false);
        }
        this.markLastVisibleItem();
    }

    private registerListeners() {
        this.registerClickTriggers(this.rootUlElement);

        getWindow().addEventListener('resize', debounce(() => {
            const isRealResize = windowWidth !== window.innerWidth;
            if (isRealResize) {
                windowWidth = window.innerWidth;
            } else {
                return;
            }
            this.resetDeferredMenu();
            if (getWindow().innerWidth >= TABLET_SIZE) {
                this.controlHeaderNavigation();
                this.moveDeferredItems().catch();
            } else if (!this.isMobileMenuOpen()) {
                this.controlHeaderNavigation(false);
            }
            this.markLastVisibleItem();
        }, 50))
    }

    private isMobileMenuOpen(): boolean {
        const trigger = getDocument().querySelector<HTMLElement>('.js-gov-header__navigation-trigger');
        if (!trigger) return false;
        return toBool(this.resolveTriggerType(trigger).getAttribute('aria-expanded'));
    }

    private async moveDeferredItems() {
        const gap = 16;
        let size = this.rootElement.getBoundingClientRect().width - 120;

        this.firstLevelLiElements.forEach((liElement) => {
            const itemSize = liElement.getBoundingClientRect().width + gap;

            if ((size - itemSize) >= 0) {
                size -= itemSize;
            } else {
                size -= itemSize;
                this.createDeferredContainer();
                this.deferredItemsContainer.removeAttribute('hidden');
                this.deferredItemsContainer.setAttribute('aria-hidden', 'false');
                this.collapseItem(liElement);
                this.temporaryListForDeferredItems.appendChild(liElement);
            }
        })
    }

    /**
     * Flags the last item that is still rendered in the navigation row so its
     * dropdown can be right-aligned instead of overflowing the page. Positional
     * CSS selectors cannot express this on their own: the row is trailed by two
     * `.gov-mobile-only` items and, once items overflow, by the generated
     * deferred ("Další") item, so the index of the last visible item shifts.
     */
    private markLastVisibleItem() {
        const items = Array.from(this.firstLevelLiElements).filter(
            (liElement) => liElement !== this.deferredItemsContainer
        );

        items.forEach((liElement) => liElement.classList.remove(LAST_VISIBLE_ITEM_CLASS));
        items[items.length - 1]?.classList.add(LAST_VISIBLE_ITEM_CLASS);
    }

    private get temporaryListForDeferredItems() {
        return this.deferredItemsContainer.querySelector('ul');
    }

    private createDeferredContainer() {
        if (this.deferredItemsContainer) {
            return;
        }

        const controlId = createID('MenuDeferred');
        const ul = getDocument().createElement('ul');
        const li = getDocument().createElement('li');
        const trigger = getDocument().createElement('gov-button');
        const icon = getDocument().createElement('gov-icon');
        const deferredName = this.rootElement.getAttribute('data-deferred-item-name');

        li.classList.add('js-deferred-items-container');

        trigger.setAttribute('type', 'base');
        trigger.setAttribute('color', 'primary');
        trigger.setAttribute('size', 'l');
        trigger.setAttribute('aria-expanded', 'false');
        trigger.setAttribute('aria-controls', controlId);
        trigger.setAttribute('aria-label', 'Zobrazit další položky');
        trigger.innerHTML = deferredName ?? 'Další';

        icon.setAttribute('type', 'templates');
        icon.setAttribute('name', 'chevron-down');
        icon.setAttribute('size', 'l');
        icon.setAttribute('slot', 'icon-end');

        ul.setAttribute('id', controlId);
        ul.setAttribute('hidden', 'hidden');
        ul.setAttribute('aria-hidden', 'true');
        ul.classList.add('gov-deferred-navigation');

        trigger.appendChild(icon);
        trigger.addEventListener('gov-click', blockRapidClicks(() => this.toggleMenu(trigger)));

        li.appendChild(trigger);
        li.appendChild(ul);

        this.rootUlElement.appendChild(li);
    }

    private resetDeferredMenu() {
        this.deferredItemsContainer?.querySelectorAll<HTMLLIElement>(':scope > ul > li').forEach((liElement) => {
            this.collapseItem(liElement);
            this.rootUlElement.appendChild(liElement);
        });
        this.rootUlElement?.querySelectorAll(':scope > .gov-mobile-only').forEach((liElement) => this.rootUlElement.appendChild(liElement));
        this.deferredItemsContainer?.remove();
    }

    private calculateSizeOfElements() {
        this.firstLevelLiElements.forEach((liElement, i) => {
            liElement.setAttribute('data-item-width', liElement.getBoundingClientRect().width.toString());
            liElement.setAttribute('data-item-index', i.toString());
        })
    }

    /**
     * Walks every level, not just the first. Once the row overflows, items with
     * their own submenu are relocated into the generated "Další" menu, where they
     * become second-level triggers. Binding only the first level left them inert
     * while `verifyAndFixAccessibility` still advertised them as expandable.
     */
    private registerClickTriggers(ulElement: HTMLUListElement) {
        this.getLiElementsInUlElement(ulElement).forEach(liElement => {
            const trigger = this.getTriggerInLiElement(liElement);
            const innerList = this.getInnerListInLiElement(liElement);

            if (!trigger || !innerList) {
                return;
            }

            trigger.addEventListener('gov-click', blockRapidClicks(() => this.toggleMenu(trigger)));
            trigger.addEventListener('click', blockRapidClicks(() => this.toggleMenu(trigger)));

            this.registerClickTriggers(innerList);
        });
    }

    private applyMenuState(trigger: HTMLElement, menuLevel: Element, expanded: boolean, icons: string[]) {
        const iconElement = trigger.querySelector('gov-icon');
        const value = expanded ? 'true' : 'false';

        trigger.setAttribute('aria-expanded', value);
        this.resolveTriggerType(trigger).setAttribute('aria-expanded', value);

        if (expanded) {
            menuLevel.removeAttribute('hidden');
            menuLevel.setAttribute('aria-hidden', 'false');
        } else {
            menuLevel.setAttribute('hidden', 'hidden');
            menuLevel.setAttribute('aria-hidden', 'true');
        }

        iconElement && iconElement.setAttribute('name', icons[expanded ? 1 : 0]);
    }

    private collapseItem(liElement: HTMLLIElement, icons = ['chevron-down', 'chevron-up']) {
        const trigger = this.getTriggerInLiElement(liElement);
        const innerList = this.getInnerListInLiElement(liElement);

        if (trigger && innerList) {
            this.applyMenuState(trigger, innerList, false, icons);
        }
    }

    /**
     * Closes every open menu except the branch the toggled trigger lives in.
     * Collapsing ancestors is what made nested menus unusable: expanding an item
     * inside the deferred "Další" panel closed the panel containing it.
     */
    private collapseMenus(icons: string[], keepOpenFor?: HTMLElement, ulElement = this.rootUlElement) {
        this.getLiElementsInUlElement(ulElement).forEach(liElement => {
            const trigger = this.getTriggerInLiElement(liElement);
            const innerList = this.getInnerListInLiElement(liElement);

            if (!trigger || !innerList) {
                return;
            }

            this.collapseMenus(icons, keepOpenFor, innerList);

            if (keepOpenFor && liElement.contains(keepOpenFor)) {
                return;
            }

            if (toBool(this.resolveTriggerType(trigger).getAttribute('aria-expanded'))) {
                this.applyMenuState(trigger, innerList, false, icons);
            }
        });
    }

    private toggleMenu(trigger: HTMLElement, icons = ['chevron-down', 'chevron-up']) {
        // Read the trigger's own state before collapsing anything, so the new
        // state never depends on what `collapseMenus` did in the meantime.
        const controlId = this.resolveTriggerType(trigger).getAttribute('aria-controls');
        const isExpanded = toBool(this.resolveTriggerType(trigger).getAttribute('aria-expanded'));
        const menuLevel = getDocument().querySelector('[id="' + controlId + '"]');

        this.collapseMenus(icons, trigger);

        if (!menuLevel) {
            return;
        }

        this.applyMenuState(trigger, menuLevel, !isExpanded, icons);

        const elementToFocus = firstFocusableElement(menuLevel);
        if (elementToFocus) {
            elementToFocus.focus && elementToFocus.focus();
        }
    }

    private verifyAndFixAccessibility(ul: HTMLUListElement) {
        this.getLiElementsInUlElement(ul).forEach((liElement) => {
            const trigger = this.getTriggerInLiElement(liElement);
            const innerList = this.getInnerListInLiElement(liElement);

            if (!trigger || !innerList) {
                return;
            }

            const controlsId = createID('MainMenu');

            if (trigger.getAttribute('aria-controls') !== innerList.getAttribute('id')) {
                trigger.setAttribute('aria-controls', controlsId);
                innerList.setAttribute('id', controlsId);
            }

            if (!trigger.getAttribute('aria-expanded')) {
                trigger.setAttribute('aria-expanded', 'false')
            }

            if (!trigger.getAttribute('aria-label')) {
                trigger.setAttribute('aria-label', 'Zobrazit / Skrýt položky sekce ' + trigger.textContent)
            }

            this.verifyAndFixAccessibility(innerList);
        })
    }

    private async accessibilityMobileNavigation() {
        const trigger = getDocument().querySelector<HTMLElement>('.js-gov-header__navigation-trigger');
        const menu = this.headerNavigationElement;

        if (!trigger || !menu) {
            return
        }

        await delay(500);

        const controller = this.resolveTriggerType(trigger);
        const controlsId = createID('MainMobileMenu');

        if (controller.getAttribute('aria-controls') !== menu.getAttribute('id') || menu.getAttribute('id') === null) {
            trigger.setAttribute('aria-controls', controlsId);
            menu.setAttribute('id', controlsId);
        }

        if (!controller.getAttribute('aria-expanded')) {
            trigger.setAttribute('aria-expanded', 'false')
        }

        if (!controller.getAttribute('aria-label')) {
            trigger.setAttribute('aria-label', 'Zobrazit / Skrýt menu')
        }

        trigger.addEventListener('gov-click', blockRapidClicks(() => this.toggleMenu(trigger, ['list', 'x-lg'])));
        trigger.addEventListener('click', blockRapidClicks(() => this.toggleMenu(trigger, ['list', 'x-lg'])));
    }

    private controlHeaderNavigation(show = true) {
        if (show) {
            this.headerNavigationElement?.removeAttribute('hidden')
            this.headerNavigationElement?.removeAttribute('aria-hidden')
        } else {
            this.headerNavigationElement?.setAttribute('hidden', 'hidden')
            this.headerNavigationElement?.setAttribute('aria-hidden', 'true')
        }
    }

    /**
     * gov-button moves the host's aria-* onto its inner `<button>`, so that is
     * where the state lives — but only once the component has rendered. Before
     * hydration the query returns `null` and the host still carries the
     * attributes itself, hence the fallback.
     */
    private resolveTriggerType(trigger: HTMLElement): HTMLElement {
        const inner = trigger && trigger.nodeName === 'GOV-BUTTON' ? trigger.querySelector('button') : trigger;
        return inner ?? trigger;
    }

    private getTriggerInLiElement(liElement: HTMLLIElement): HTMLLIElement {
        return liElement.querySelector(':scope > gov-button, :scope > button');
    }

    private getInnerListInLiElement(liElement: HTMLLIElement): HTMLUListElement {
        return liElement.querySelector(':scope > ul');
    }

    private getLiElementsInUlElement(ulElement: HTMLUListElement): NodeListOf<HTMLLIElement> {
        return ulElement.querySelectorAll(':scope > li');
    }

    private get firstLevelLiElements(): NodeListOf<HTMLLIElement> {
        return this.rootUlElement.querySelectorAll(':scope > li:not(.gov-mobile-only)')
    }

    private get deferredItemsContainer() {
        return this.rootElement.querySelector('.js-deferred-items-container')
    }

    private get rootUlElement(): HTMLUListElement {
        return this.rootElement.querySelector(':scope > ul')
    }

    private get headerNavigationElement() {
        return getDocument().querySelector<HTMLElement>('.js-gov-header__navigation');
    }
}

export default MainNavigation;