import { isset } from "../global/helpers";

/* ==========================================================================
   NavigationHandler handler
   - Primary usage for overlay navigation
   - Secondary if site used a pop-up/slide-in menu
 ========================================================================== */

const NavigationHandler = {

    navElement : '',
    scrolled : 0,
    isActive : false,

    // Initialize click event
    init : function()
    {
        // Bind Navigation to Handler
        NavigationHandler.navElement = document.querySelector('.overlay-menu');

        // Bind clicks to menu button
        const menuButtons = document.querySelectorAll('.menu-trigger-button');
        const menuButtonsLength = menuButtons.length;
        for(let i = 0; i < menuButtonsLength; i++)
        {
            const menuButton = menuButtons[i];
            menuButton.addEventListener('click', function(){
                NavigationHandler.toggle();
            });
        }

        const overlayShade = document.querySelector('.overlay-menu--shader');
        if(isset(overlayShade)){
            overlayShade.addEventListener('click', function () {
                NavigationHandler.close();
            });
        }

        const overlayClose = document.querySelector('.overlay-menu--close-button');
        if(isset(overlayClose)){
            overlayClose.addEventListener('click', function () {
                NavigationHandler.close();
            });
        }

        if(isset(NavigationHandler.navElement)){
            setTimeout(function () {
                NavigationHandler.navElement.classList.add('overlay-menu__allow-animation');
            }, 500);
        }
    },

    // Toggle navigation
    toggle : function()
    {
        if( ! NavigationHandler.isActive) NavigationHandler.open();
        else NavigationHandler.close();
    },

    // Open Navigation
    open : function()
    {
        NavigationHandler.scrolled = window.pageYOffset;
        NavigationHandler.navElement.classList.add('overlay-menu__active');
        NavigationHandler.navElement.classList.add('overlay-menu__shader-active');
        NavigationHandler.isActive = true;

        setTimeout(function(){
            document.body.classList.add('preventScroll');
        }, 400);

    },

    // Close Navigation
    close : function()
    {

        NavigationHandler.navElement.classList.remove('overlay-menu__active');
        NavigationHandler.navElement.classList.remove('overlay-menu__shader-active');
        NavigationHandler.isActive = false;

        document.body.classList.remove('preventScroll'); 
        window.scrollTo(0, NavigationHandler.scrolled);
    }
};

export default NavigationHandler;