/* ==========================================================================
   ModalHandler
 ========================================================================== */
 
export const ModalHandler = {

    triggers: null,
    activeHash: null,
    modal: null,

    init: function () {

        // get all modals
        const modals = document.querySelectorAll('.o-modal__content');
        modals.forEach(modal => {
            // if modal has thead, set top to height of modal header (stacked sticky elements offset)
            const modalThead = modal.querySelector('.o-modal__thead');
            const modalHeader = modal.querySelector('.o-modal__header');
            if (modalThead) { modalThead.style.top = `${modalHeader.clientHeight}px` }
        })

        const self = this
        ModalHandler.triggers = document.querySelectorAll('.js-modal-trigger');

        if(window.location.hash) {
            let hash = window.location.hash;
            self.activeHash = hash.substr(1)

            ModalHandler.modal = document.querySelector('.js-modal[data-hash="' + self.activeHash + '"]');
            if(ModalHandler.modal) ModalHandler.toggleOverlay()
        }


        for(let i = 0; i < ModalHandler.triggers.length; i++) {

            const modalTrigger = ModalHandler.triggers[i];

            modalTrigger.addEventListener('click', function () {

                const el = event.currentTarget;
                let hash = el.getAttribute('href');
                self.activeHash = hash.substr(1)

                ModalHandler.modal = document.querySelector('.js-modal[data-hash="' + self.activeHash + '"]');
                 if(ModalHandler.modal) ModalHandler.toggleOverlay()
            });
        }
    },

    toggleOverlay: function () {

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

        // If the overlayMenu is already active, collapse it and quit
        if (ModalHandler.modal.classList.contains('is-active')) {

            window.removeEventListener("keydown", ModalHandler.handleKeyPressed);

            // Trigger fade out animation
            ModalHandler.modal.classList.add('fade-out');

            // Then remove the classes
            setTimeout(function () {

                // Reset the scroll position on close to top
                const modalOverlayScroller = ModalHandler.modal.querySelector('.js-modal-scroller');
                if(modalOverlayScroller) modalOverlayScroller.scrollTop = 0;

                ModalHandler.modal.classList.remove('is-active');
                ModalHandler.modal.classList.remove('fade-out');

                history.pushState("", document.title, window.location.pathname + window.location.search);

            }, 300);

            return;
        }

        window.addEventListener("keydown", ModalHandler.handleKeyPressed);

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

        // Toggle active overlayMenu by setting a class on the body
        ModalHandler.modal.classList.toggle('is-active');

        const closeButtons = ModalHandler.modal.getElementsByClassName('js-close-modal');
        for( let i = 0; i < closeButtons.length; i++) {
            closeButtons[i].addEventListener('click', function () {
                ModalHandler.toggleOverlay();
            });
        }

    },

    /**
     *
     * @param {KeyboardEvent} event
     * @return {undefined}
     */
    handleKeyPressed: function (event) {
        switch (event.key) {
            case 'Escape':
                ModalHandler.toggleOverlay();
            default:
        }

    },

};