/* ==========================================================================
   Navigation handler
   - Handles the showing and hiding of the overlay-menu component which has the proper classes.
 ========================================================================== */

export const OverlayMenuHandler = {

    init: function () {
        const overlayMenuTrigger = document.querySelector('.js-overlay-menu-trigger');
        OverlayMenuHandler.initOverlayMenu(overlayMenuTrigger);

        const overlayNavSubmenuTriggers = document.querySelectorAll('.js-overlay-menu-trigger');
        if(isset(overlayNavSubmenuTriggers) && overlayNavSubmenuTriggers.length > 0){
            for(let i = 0; i < overlayNavSubmenuTriggers.length; i++){
                const overlayNavSubmenuTrigger = overlayNavSubmenuTriggers[i];

                overlayNavSubmenuTrigger.addEventListener('click', OverlayMenuHandler.toggleSubMenu)
            }
        }
    },

    initOverlayMenu: function (overlayMenuTrigger) {
        overlayMenuTrigger.addEventListener('click', OverlayMenuHandler.toggleOverlayMenu, false);
    },

    toggleOverlayMenu: function (event) {
        const overlayMenu = document.querySelector('.js-overlay-menu');
        const overlayMenuBody = overlayMenu.querySelector('.js-overlay-menu-persist-scrolling');

        // Bail if overlayMenu doesn't exist
        if (!overlayMenu) return;

        // Clear previously locked scroll on the body
        bodyScrollLock.enableBodyScroll(overlayMenuBody);

        // If the overlayMenu is already active, collapse it and quit
        if (document.body.classList.contains('is-overlay-menu-active')) {
            document.body.classList.remove('is-overlay-menu-active');
            return;
        }

        // Lock scrolling on the body
        bodyScrollLock.disableBodyScroll(overlayMenuBody);

        // Toggle active overlayMenu by setting a class on the body
        document.body.classList.toggle('is-overlay-menu-active');
    },

    toggleSubMenu: function (evt) {
        evt.currentTarget.classList.toggle('toggled');

        const el = evt.currentTarget.parentElement;
        const menu = el.querySelector('.js-overlay-menu-target');
        if(isset(menu)) menu.classList.toggle('is-open');
    },
};