const dropdownWrapperSelector = '.dropdown';
const dropdownMenuSelector = '.dropdown__menu, .menu';
const dropdownTriggerSelector = '.dropdown__trig';
const subdropdownMenuSelector = '.subdropdown__menu';
const subdropdownTriggerSelector = '.subdropdown__trig';
const activeMenuClass = 'dropdown__menu--open';
const activeTriggerClass = 'dropdown__trig--active';
const activeBodyClass = 'body--dropdown-open';
const targetNavigations = '.main-nav, .secondary-nav, .menu, .x-layer';
const menuOpenClass = 'body--menu-open';
const dropdownSwitchClass = 'body--dropdown-switch';
const mobileBreakpoint = 768;

const initNavigation = () => {
    // menu trigger
    const menuTriggers = document.querySelectorAll('.menu-trigger');
    for (const menuTrigger of menuTriggers) {
        menuTrigger.addEventListener('click', (e) => {
            e.preventDefault();

            document.body.classList.toggle(menuOpenClass);
            hideDropdowns();

            if (document.body.classList.contains(menuOpenClass)) {
                menuTrigger.setAttribute('aria-expanded', 'true');
            } else {
                menuTrigger.setAttribute('aria-expanded', 'false');
            }
        });
    }

    // dropdowns
    const dropdownTriggers = document.querySelectorAll(dropdownTriggerSelector);
    const dropdownMenus = document.querySelectorAll(dropdownMenuSelector);

    // subdropdowns
    const subDropdownTriggers = document.querySelectorAll(subdropdownTriggerSelector);
    const subDropdownMenus = document.querySelectorAll(subdropdownMenuSelector);

    for (const trigger of dropdownTriggers) {
        initTrigger(trigger, [...dropdownTriggers, ...subDropdownTriggers], [...dropdownMenus, ...subDropdownMenus]);
    }

    for (const trigger of subDropdownTriggers) {
        initTrigger(trigger, subDropdownTriggers, subDropdownMenus);
    }

    // close on outside click
    document.body.addEventListener('click', (e) => {
        if (e.target.closest(targetNavigations)) return;

        hideDropdowns([...dropdownMenus, ...subDropdownMenus], [...dropdownTriggers, ...subDropdownTriggers]);
    });
}

const initTrigger = (trigger, relatedTriggers, relatedDropdowns) => {
    const elId = trigger.getAttribute('data-dropdown');
    const dropdown = document.querySelector('#' + elId);
    if (!dropdown) return;

    trigger.setAttribute('aria-expanded', 'false');

    // hover dropdowns
    const onHover = trigger.dataset.onHover;
    const dropdownWrapper = trigger.closest(dropdownWrapperSelector);
    if (onHover && dropdownWrapper) {
        dropdownWrapper.addEventListener('mouseover', (e) => {
            if (document.body.classList.contains(menuOpenClass)) return;

            hideDropdowns(relatedDropdowns, relatedTriggers);
            showDropdown(dropdown, trigger);
        });
        dropdownWrapper.addEventListener('mouseleave', (e) => {
            if (document.body.classList.contains(menuOpenClass)) return;

            document.body.classList.add(dropdownSwitchClass);
            setTimeout(() => document.body.classList.remove(dropdownSwitchClass), 150);
            hideDropdowns(relatedDropdowns, relatedTriggers);
        });
    }

    // click
    trigger.addEventListener('click', (e) => {
        if (onHover && window.innerWidth > mobileBreakpoint) return;

        const wasOpened = dropdown.classList.contains(activeMenuClass);

        // close other
        hideDropdowns(relatedDropdowns, relatedTriggers);

        // open
        if (!wasOpened) {
            showDropdown(dropdown, trigger);
        }
    });
}

const hideDropdowns = (dropdowns, triggers) => {
    document.body.classList.remove(activeBodyClass);

    document.body.classList.add(dropdownSwitchClass);
    setTimeout(() => document.body.classList.remove(dropdownSwitchClass), 150);

    if (!dropdowns || !triggers) return;

    for (const dropdown of dropdowns) {
        dropdown.classList.remove(activeMenuClass);
    }
    for (const trigger of triggers) {
        trigger.classList.remove(activeTriggerClass);
        trigger.setAttribute('aria-expanded', 'false');
    }
}

const showDropdown = (dropdown, trigger) => {
    dropdown.classList.add(activeMenuClass);

    trigger.classList.add(activeTriggerClass);
    trigger.setAttribute('aria-expanded', 'true');

    document.body.classList.add(activeBodyClass);
}

/* const toggleDropdown = (dropdown, trigger) => {
    dropdown.classList.toggle(activeMenuClass);
    trigger.classList.toggle(activeTriggerClass);
} */

export { initNavigation };
