/* ==========================================================================
   Navigation handler
   - Handles the showing and hiding of the overlay-menu component which has the proper classes.
 ========================================================================== */
const bodyScrollLock = require('body-scroll-lock');

const YoutubeModalHandler = {

    init: function () {
        const bodyElem = document.querySelector("body");
        const bodyToggleClasses = ["is-visible-video-modal"];
        const youtubeIframe = document.querySelector("#youtube-iframe");
        const openTriggers = document.querySelectorAll('.js-open-video-modal');
        const closeTriggers = document.querySelectorAll('.js-close-video-modal');


        // if the modal is opened
        openTriggers.forEach(function(openTrigger){
            openTrigger.addEventListener('click', function (e) {

                // prevent default behavior for a-tags, button tags, etc.
                e.preventDefault();

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

                // Grab the video ID from the element clicked
                const id = e.target.getAttribute('data-youtube-id');

                // Autoplay when the modal appears
                // Note: this is intetnionally disabled on most mobile devices
                // If critical on mobile, then some alternate method is needed
                const autoplay = '?autoplay=1';

                // Don't show the 'Related Videos' view when the video ends
                const related_no = '&rel=0';

                // String the ID and param variables together
                const src = '//www.youtube.com/embed/' + id + autoplay + related_no;

                // Pass the YouTube video ID into the iframe template...
                // Set the source on the iframe to match the video ID
                youtubeIframe.setAttribute('src', src);

                // Add class to the body to visually reveal the modal
                bodyElem.classList.add(...bodyToggleClasses);
            }, false);
        });


        // if the 'close' button/element, or the overlay are clicked
        closeTriggers.forEach(function(closeTrigger){
            closeTrigger.addEventListener('click', function (e) {
                close_video_modal(e);
            }, false);
        });


        // if the ESC key is tapped
        bodyElem.addEventListener('keyup',function (e) {
            // ESC key maps to keycode `27`
            if (e.keyCode == 27) {

                // call the close and reset function
                close_video_modal(e);

            }
        });

        // Close and Reset the Video Modal
        function close_video_modal(e) {

            e.preventDefault();

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

            // re-hide the video modal
            bodyElem.classList.remove(...bodyToggleClasses);

            // reset the source attribute for the iframe template, kills the video
            youtubeIframe.setAttribute('src', '');

        }

    }
};

YoutubeModalHandler.init();