//
// YJA Mobile Navigation
//

// Toggle open / close
function yjaMobileNavigation(yjaMobileNavConfig) {

    let yjaMenuToggler = [] || "";
    let yjaMenuMainToggler = "mmenu-open-panel";
    const yjaMenuWrapper = document.querySelector('.yja-mobile-navigation');
    const yjaMenuButtonClose = document.getElementById("yjaMenuButtonClose");
    const yjaMenuButtonLast = document.getElementById('yjaMenuBottomButton');
    const toggleChildMenuButtons = document.querySelectorAll('button.yja-mobile-navigation__button--toggler');


    let config = {
        navItemId: 'mainMenubar',
        togglerElement: '',
        yjaMenuMainToggler: 'mmenu-open-panel',
        elementsToHide: [] || "",
        excludedElements: ['#skip-to-content','#footer'],
        focusableElements: ['a[href]','area[href]','button','details','input','iframe','select','textarea','[contentEditable=""]','[contentEditable="true"]','[contentEditable="TRUE"]','[tabindex]:not([tabindex^="-"])'] //':not([disabled])'
    }

    document.addEventListener('DOMContentLoaded', () => {
        config = { ...config, ...yjaMobileNavConfig };
        yjaMenuMainToggler = document.getElementById(config.yjaMenuMainToggler);

        if (config.togglerElement === '') config.togglerElement =  `#${config.yjaMenuMainToggler}`;



        if ( config.togglerElement !== '' && yjaMenuWrapper !== null) {
            if (config.togglerElement.startsWith('.')) yjaMenuToggler = [...document.querySelectorAll(config.togglerElement)];
            else yjaMenuToggler = document.querySelector(config.togglerElement);


            // Open mobile menu
            if (Array.isArray(yjaMenuToggler)) {
                yjaMenuToggler.forEach(toggler => {
                    toggler.addEventListener("click", (evt) => {
                        evt.preventDefault()
                        openMobileNavigation(toggler, yjaMenuWrapper, config)
                    }, false);
                })
            } else {
                yjaMenuToggler.addEventListener("click", (evt) => {
                    evt.preventDefault()
                    openMobileNavigation(yjaMenuToggler, yjaMenuWrapper, config)
                }, false);

            }



            if (yjaMenuButtonClose !== null) {
                // Close mobile menu by clock
                yjaMenuButtonClose.addEventListener("click", () => {
                    // Hide other DOM elements from screen readers
                    modifyDomElements(config,true);
                    closeMobileMenu(yjaMenuWrapper, yjaMenuToggler);


                }, false);

                // If user press shift + TAB, jump to last focusable element on navigation
                yjaMenuButtonClose.addEventListener("keydown", (evt) => {
                    const focusable = focusables(yjaMenuWrapper);
                    if (evt.shiftKey && evt.key === 'Tab') {
                        if (document.activeElement === focusable[0]) {
                            // Find first nav level links nav links/buttons without LI elements
                            const mainLinks = [...focusable].filter(item => {
                                if (item.closest('li') !== null) {
                                    if (item.closest('li').classList.contains('level-1')) {
                                        return item;
                                    }
                                } else {
                                    return item;
                                }
                            });

                            if (mainLinks.length > 0) {
                                // Move to last element
                                mainLinks[mainLinks.length - 1].focus();
                            }
                        }
                    }
                }, false);

            }

            // Toggle child menu visibility
            if (toggleChildMenuButtons.length > 0) {
                toggleChildMenuButtons.forEach(button => {
                    button.addEventListener('click', () => {

                        // find closest div
                        const parent = button.closest('div');
                        // find closest LI
                        const li = parent.closest('li');
                        // find next UL that contains child elements
                        const ul = parent.nextElementSibling;

                        // if UL exists toggle its visibility
                        if (ul !== null) {

                            button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
                            if (button.getAttribute('aria-expanded') === 'false') {
                                li.classList.remove('yja-mobile-navigation--open');
                            } else {
                                li.classList.add('yja-mobile-navigation--open');
                            }
                        }
                    });
                });
            }



            // For screen readers and <TAB> navigation
            if (yjaMenuButtonLast !== null) {
                // If user press TAB, move focus to first element on navigation.
                yjaMenuButtonLast.addEventListener("keydown", (evt) => {
                    const focusable = focusables(yjaMenuWrapper);
                    if (evt.key === "Tab") {
                        evt.preventDefault()
                        yjaMenuButtonClose.focus();
                    }
                }, false);

                // Close action
                yjaMenuButtonLast.addEventListener('click', () => {
                    modifyDomElements(config,true);
                    closeMobileMenu(yjaMenuWrapper, yjaMenuToggler);
                }, false);
            }


            // Close by clicking outside navigation panel
            yjaMenuWrapper.addEventListener('click', (evt) => {
                const panel = yjaMenuWrapper.querySelector('.yja-mobile-navigation__content');
                const inside = panel.contains(evt.target);
                if (!inside) {
                    modifyDomElements(config,true);
                    closeMobileMenu(yjaMenuWrapper, yjaMenuToggler);
                }
            }, false);

            // Close by ESC key
            yjaMenuWrapper.addEventListener('keydown', (evt) => {
                if (evt.key === "Escape") {
                    modifyDomElements(config,true);
                    if (Array.isArray(yjaMenuToggler)) {
                        yjaMenuToggler.forEach(toggler => {
                            closeMobileMenu(yjaMenuWrapper, toggler);
                        })
                    } else {
                        closeMobileMenu(yjaMenuWrapper, yjaMenuToggler);
                    }
                }
            }, false);

        }
    },false)
}

function openMobileNavigation(toggler, menuWrapper,config) {
    const body = document.querySelector('body');
    // Hide other DOM elements from screen readers
    modifyDomElements(config);
    toggler.setAttribute('aria-expanded','true');
    menuWrapper.classList.add('yja-mobile-navigation--open');
    menuWrapper.classList.remove('yja-mobile-navigation--slide-out');
    body.classList.add('mobile-navigation-visible')

    // Add timeout to enable animations
    setTimeout(() => {
        menuWrapper.classList.add('yja-mobile-navigation--slide-in');
    }, 100);

    // Move focus on navigation element
    setTimeout(() => {
        const FOCUSABLE_ELEMENTS = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'];
        let focusablesElements = focusables(menuWrapper);

        // Check if toggler has data-focus-target set
        // if has focus on element or its first focusable child, that was defined in data-focus-target attribute
        if (toggler?.dataset?.focusTarget) {
            const focusTarget = document.getElementById(toggler?.dataset?.focusTarget);
            if (!focusTarget) return;
            if (focusTarget.hasAttribute('tabIndex') && focusTarget.getAttribute('tabIndex') === '-1') return;

            if (FOCUSABLE_ELEMENTS?.includes(focusTarget?.nodeName)) {
                focusablesElements = focusTarget;
            } else {
                focusablesElements = getActiveLink(focusTarget);
            }

            // Set focus on correct element
            if (focusablesElements instanceof Array)  focusablesElements[0].focus();
            else focusablesElements.focus();

        } else {
            // Set focus on a-elememn whose parent <LI> has aria-current=page
            // else set focus on first focusable element in mobile menu element
            let navItem = document.getElementById(config.navItemId);
            if (!navItem) {
                if (focusablesElements instanceof Array) focusablesElements[0].focus();
                else focusablesElements.focus();
            } else {
                const currentPage = getActiveLink(navItem);

                // Set focus on correct element
                if (focusablesElements instanceof Array)  currentPage[0].focus();
                else currentPage.focus();

            }
        }

    },500);
}

function getActiveLink(focusTarget) {
    let item;
    if (focusTarget.classList.contains('nav')) {
        let currentPage = focusTarget.querySelector('[aria-current="page"]');

        if (!currentPage) item = focusables(focusTarget)
        else {
            if (currentPage.nodeName === 'LI') item = focusables(currentPage);
            if (currentPage.nodeName === 'A')  item = currentPage;
        }
    } else {
        item = focusables(focusTarget)
    }

    return item;
}

function focusables(wrapper) {
    const focusable = [...wrapper.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
    return focusable;
}

const closeMobileMenu = (yjaMenuWrapper,yjaMenuMainToggler) => {
    const body = document.querySelector('body');

    yjaMenuWrapper.classList.remove('yja-mobile-navigation--slide-in');
    yjaMenuWrapper.classList.add('yja-mobile-navigation--slide-out');

    if (yjaMenuMainToggler.length > 1) yjaMenuMainToggler.forEach(toggle => toggle.setAttribute('aria-expanded', 'false'));
    else yjaMenuMainToggler.setAttribute('aria-expanded', 'false');

    body.classList.remove('mobile-navigation-visible');

    // Add timeout to enable animations
    setTimeout(() => {
        yjaMenuWrapper.classList.remove('yja-mobile-navigation--open');

        if (yjaMenuMainToggler.length > 1) yjaMenuMainToggler.forEach(toggle => toggle.setAttribute('aria-expanded', 'false'));
        else yjaMenuMainToggler.setAttribute('aria-expanded', 'false');

        // Move focus out of navigation element
        if (yjaMenuMainToggler.length > 1) yjaMenuMainToggler[0].focus();
        else yjaMenuMainToggler.focus()
    }, 500);
}

function getDisableElements(elements) {
    if (!Array.isArray(elements)) return;
    let domElements = []
    elements.forEach(item =>{
        let type = item.charAt(0)
        switch(type) {
            case '.':
                let items = [...document.querySelectorAll(item)]
                if (document.querySelectorAll(item)) items.forEach(item => domElements = [...domElements, item])
                break;
            case '#':
                if (document.querySelector(item)) domElements = [...domElements, document.querySelector(item)]
                break;
            default:
                return
        }
    })
    return domElements;
}

function modifyDomElements(config,state) {
    if (Array.isArray(config.elementsToHide) && config.elementsToHide.length > 0) {
        config.elementsToHide.forEach(item => config.excludedElements =  [...config.excludedElements, item])
    }
    if (typeof config.elementsToHide === 'string' && config.elementsToHide !== '') config.excludedElements =  [...config.excludedElements, config.elementsToHide]

    const elements = getDisableElements(config.excludedElements);
    setVisibilityOfDomElements(elements,state,config)
}

function setVisibilityOfDomElements(items, show,config) {
    let hide = show ? 'false' : 'true';
    if (items.length > 0) {
        let focusable = []
        items.forEach(elem => {
            let arr = elem.querySelectorAll(config.focusableElements)
            arr.forEach(a => focusable = [...focusable, a]);
            elem.setAttribute('aria-hidden',hide);

            if (hide === 'true') elem.setAttribute('tabIndex', '-1');
            else elem.removeAttribute('tabIndex');
        })

        if (focusable.length > 0) {
            if (hide === 'true') focusable.forEach(e => e.setAttribute('tabIndex', '-1'));
            else focusable.forEach(e => e.removeAttribute('tabIndex'));
        }
    }
}