/* ==========================================================================
   Subnav handler
   - Handles the subnav component which has the proper classes.
 ========================================================================== */

export const SubmenuHandler = {

    activeMenu: null,

    init: function () {

        const submenuTriggers = document.querySelectorAll('.js-submenu-trigger');
        if(isset(submenuTriggers) && submenuTriggers.length !== 0){

            for(let i = 0; i < submenuTriggers.length; i++){
                const submenuTrigger = submenuTriggers[i];
                submenuTrigger.addEventListener('click', SubmenuHandler.toggleMenu);
            }
        }

        const subsubmenuTriggers = document.querySelectorAll('.js-subsubmenu-trigger')
        if(isset(subsubmenuTriggers) && subsubmenuTriggers.length !== 0){
            for(let i = 0; i < subsubmenuTriggers.length; i++){
                const subsubmenuTrigger = subsubmenuTriggers[i];
                subsubmenuTrigger.addEventListener('mouseover', SubmenuHandler.mouseIn);
                subsubmenuTrigger.addEventListener('mouseout', SubmenuHandler.mouseOut);

            }
        }
    },

    toggleMenu: function (evt) {
        const el = evt.currentTarget.parentElement;
        const menu = el.querySelector('.js-submenu');
        if(isset(menu)) {
            menu.classList.toggle('is-open');
            SubmenuHandler.listenerToClickOutside(menu);
        }
    },

    listenerToClickOutside: function (menu) {
        if(menu.classList.contains('is-open')) {
            SubmenuHandler.activeMenu = menu;
            window.addEventListener('click', SubmenuHandler.clickOutsideMenu);
        }
        else {
            SubmenuHandler.activeMenu = null;
            window.removeEventListener('click', SubmenuHandler.clickOutsideMenu);
        }
    },

    clickOutsideMenu: function (evt) {

        if(!isset(SubmenuHandler.activeMenu)) return;

        if (SubmenuHandler.outsideClick(evt, SubmenuHandler.activeMenu) && !evt.target.classList.contains('js-submenu-trigger')) {
            SubmenuHandler.activeMenu.classList.remove('is-open');
            SubmenuHandler.activeMenu.classList.remove('hovering');
            SubmenuHandler.listenerToClickOutside(SubmenuHandler.activeMenu);
        }
    },

    toggleSubmenu: function (el, direction = 0) {
        const subMenu = el.parentElement.parentElement;
        const subsubMenu = el.querySelector('.js-subsubmenu');

        if(direction === 0) {
            subMenu.classList.add('hovering');
            subsubMenu.classList.add('is-open');
            subMenu.style.minHeight = subsubMenu.clientHeight + 'px';
        }
        else {
            subMenu.classList.remove('hovering');
            subsubMenu.classList.remove('is-open');
            subMenu.style.minHeight = null;
        }
    },

    mouseIn: function (evt) {
        const el = evt.currentTarget;
        SubmenuHandler.toggleSubmenu(el);
    },
    mouseOut: function (evt) {
        const el = evt.currentTarget;
        SubmenuHandler.toggleSubmenu(el, 1);
    },

    outsideClick: function (event, notelem)	{
        let clickedOut = true;
        if (event.target == notelem || notelem.contains(event.target)) clickedOut = false;
        return clickedOut
    }
};