import { ready, slideFadeToggle } from '@site/js/utils/dom.js';

/**
 * Main menu / mobile show-hide menu (vanilla).
 *
 * `showHideMenus(selector, breakpoint)`:
 * - Below `breakpoint` (mobile), hides the section that follows each
 *   matched trigger and tags the trigger with `.isClickable`.
 * - Above `breakpoint` (desktop), removes `.isClickable` and resets the
 *   section so CSS can render the natural desktop layout.
 *
 * Clicks on any `.isClickable` element are handled by a single delegated
 * listener registered once below — this fixes the listener-stacking bug
 * the previous implementation had on repeated resize calls.
 *
 * The function is also exported on `window` for backward compatibility
 * with legacy scripts that haven't been imported into the module graph.
 */
export function showHideMenus(selector, breakpoint) {
    document.querySelectorAll(selector).forEach((trigger) => {
        if (trigger.classList.contains('directLink')) {
            return;
        }

        const dataTarget = trigger.dataset.target;
        const section = dataTarget
            ? document.querySelector(dataTarget)
            : trigger.nextElementSibling;

        if (!section) {
            return;
        }

        const isMobile = window.matchesMediaQuery(0, breakpoint);
        const isDesktop = window.matchesMediaQuery(Number(breakpoint) + 1);

        if (isMobile && !trigger.classList.contains('isClickable')) {
            section.style.display = 'none';
            trigger.classList.add('isClickable');
        } else if (isDesktop && trigger.classList.contains('isClickable')) {
            trigger.classList.remove('isClickable');
            trigger.classList.remove('open');
            section.classList.remove('open');
            section.style.display = '';
        }
    });
}

// Legacy global — some not-yet-converted modules still reach for this.
window.showHideMenus = showHideMenus;

// One global delegated handler — fires for every `.isClickable` trigger on
// the page regardless of which `showHideMenus` call added it.
document.addEventListener('click', (event) => {
    const target = event.target instanceof Element
        ? event.target.closest('.isClickable')
        : null;
    if (!target) {
        return;
    }

    event.preventDefault();

    const dataTarget = target.dataset.target;
    const section = dataTarget
        ? document.querySelector(dataTarget)
        : target.nextElementSibling;

    if (!section) {
        return;
    }

    section.classList.toggle('open');
    target.classList.toggle('open');
    slideFadeToggle(section);
});

ready(() => {
    if (document.querySelector('.mainMenu')) {
        showHideMenus('.mainMenu .hasChildren > a', 1120);
    }
});

window.addEventListener('resize', window.debouncer(() => {
    if (document.querySelector('.mainMenu')) {
        showHideMenus('.mainMenu .hasChildren > a', 1120);
    }
}));

window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.megaMenuWrapper').forEach((el) => {
        el.classList.add('menuReady');
    });
});
