/* ==========================================================================
   YoutubeModalHandler
 ========================================================================== */
 
export const YoutubeModalHandler = {

    triggers: null,
    youtubeModal: null,
    youtubeId: '',
    video: null,

    init: function () {

        YoutubeModalHandler.triggers = document.querySelectorAll('.js-youtube-modal-button');
        YoutubeModalHandler.youtubeModal = document.querySelector('.js-youtube-modal-overlay');

        if(isset(YoutubeModalHandler.youtubeModal) && isset(YoutubeModalHandler.triggers) && YoutubeModalHandler.triggers.length >= 1) {

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

                const youtubeModelTrigger = YoutubeModalHandler.triggers[i];

                youtubeModelTrigger.addEventListener('click', function () {
                    YoutubeModalHandler.youtubeId = this.getAttribute('data-youtube');
                    YoutubeModalHandler.initYoutube();
                });
            }

            // Add toggle (close) events to all the close buttons
            const closeButtons = YoutubeModalHandler.youtubeModal.getElementsByClassName('js-close-youtube-modal-overlay');

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

                closeButtons[i].addEventListener('click', function () {
                    YoutubeModalHandler.toggleOverlay();
                });
            }
        }
    },

    /**
     * Check if external script is loaded
     *
     */
    initYoutube: function() {
        // See if YT variable exists
        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
            // Setup API ready function
            window.onYouTubePlayerAPIReady = function() {
                YoutubeModalHandler.openModal();
            };
            // Load external script
            getScript('https://www.youtube.com/iframe_api');
            // If YT already exists load player
        } else {
            YoutubeModalHandler.openModal();
        }
    },

    openModal: function () {

        if(!isset(YoutubeModalHandler.video)) {
            YoutubeModalHandler.video = new YT.Player('youtube-modal-video',{
                height: 200,
                width: 200,
                videoId: YoutubeModalHandler.youtubeId,
                host: 'https://www.youtube-nocookie.com',
                playerVars: {
                    modestbranding: 0,
                    rel: 0,
                    disablekb: 1,
                    autoplay: true
                },
            });
        }
        else {
            YoutubeModalHandler.video.loadVideoById(YoutubeModalHandler.youtubeId);

            if(isset(YoutubeModalHandler.video.playVideo) ) {
                YoutubeModalHandler.video.playVideo();
            }
        }

        YoutubeModalHandler.toggleOverlay();
    },

    toggleOverlay: function () {

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

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

            // Stop the video if function is defined
            if(isset(YoutubeModalHandler.video.stopVideo)) YoutubeModalHandler.video.stopVideo();

            // Trigger fade out animation
            document.body.classList.add('is-youtube-modal-fade-out');

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

                // Reset the scroll position on close to top
                const overlayScroller = YoutubeModalHandler.youtubeModal.querySelector('.js-youtube-modal-overlay-scroller');
                overlayScroller.scrollTop = 0;

                document.body.classList.remove('is-youtube-modal-active');
                document.body.classList.remove('is-youtube-modal-fade-out');

            }, 300);

            return;
        }
        // else {
        //     console.log(YoutubeModalHandler.video);
            // YoutubeModalHandler.video.playVideo();
        // }

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

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

    },

    handleKeyPressed: function (event) {

        switch (event.key) {
            case 'Escape':
                return YoutubeModalHandler.toggleOverlay();

            default:
            // console.log(event);
        }

    },

};