(function ($, ally, drupalSettings, window) {

    // Create a global state object
    var modalState = {};
    modalState.cache = {};
    modalState.disabledHandler = null;
    modalState.activeElement = null;
    modalState.$triggerEl = null;
    modalState.video = {
        count: 0,
        currentVideo: null

    };

    // Exit if there are no modal triggers on the page
    if (!document.querySelector('[data-izimodal-open]')) { return; }

    // Handle links that require functionality of a <button />
    ally.when.key({
        context: $('a[data-izimodal-open]'),
        enter: simulateButtonClick,
        space: simulateButtonClick
    });

    // Handle when users click on modal triggers
    $(document).on('click', '[data-izimodal-open]', function handleModalTriggerClick(evt) {
        modalState.$triggerEl = $(evt.currentTarget);
    });


    // Create unique ID's to video modals before instantiating them.
    if($('[data-izimodal-video]').length) {
        $('[data-izimodal-video]').each(function(){
            var wrapper = $(this).closest('.video-modal-wrapper');
            var id = 'video-modal-' + modalState.video.count++;
            $('[data-izimodal-video]', wrapper).attr('data-izimodal-open', '#' + id);
            $('.video-modal', wrapper).attr('id', id);
        });
    }


    // Initiatialize each modal based on their trigger.
    $('[data-izimodal-open]').each(function () {

        var target = $(this).attr('data-izimodal-open');

        // Exit if the target doesn't exist or has already been initialized
        if (!$(target).length || modalState.cache[target]) { return; }

        // Store target in modal cache
        modalState.cache[target] = true;

        var options = {
            bodyOverflow: true,
            onOpening: onOpening,
            onOpened: onOpened,
            onClosing: onClosing,
            onClosed: onClosed
        };

        // Initialize modal
        $(target).iziModal(options);
    });

    /***************************************************************************
     * Function Declarations
     ***************************************************************************/

    /**
     * allyjs event handler for `ally.when.key` to
     * simulate <button /> functionality for links
     *
     * @param {object} evt - event object
     */
    function simulateButtonClick(evt) {
        modalState.$triggerEl = $(evt.currentTarget);
        evt.preventDefault();
        evt.stopImmediatePropagation();
        evt.target.click();
    }

    /**
     * Handler for `iziModal.options.onOpening` callback
     *
     * @param {object} modal
     */
    function onOpening(modal) {
        // Save focus point
        modalState.activeElement = document.activeElement;

        // Disable all focusable elements exept
        // those in the target element.
        modalState.disabledHandler = ally.maintain.disabled({
            filter: modal.$element
        });

          // Add url to the continue button of the if the external link modal
        if (modalState.$triggerEl.attr('data-externallink-continue')) {
            var link = modalState.$triggerEl.attr('href');
            var continueLink = modalState.$triggerEl.attr('data-externallink-continue');
            $(continueLink, modal.$element).attr('href', link);
            $(continueLink, modal.$element).off('click', closeModal);
            $(continueLink, modal.$element).on('click', closeModal);
        }

        handleVideoOptions(modal);

        function closeModal(){
            modal.close();
        }
    }

    /**
     * Handler for `iziModal.options.onOpened` callback
     *
     * @param {object} modal
     */
    function onOpened(modal) {

    }

    /**
     * Handler for `iziModal.optionsonClosed` callback
     *
     * @param {object} modal
     */
    function onClosed() {

        // Focus on previously focused element
        modalState.activeElement.focus();
    }

    /**
     * Handler for `iziModal.options.onClosing` callback
     *
     * @param {object} modal
     */
    function onClosing(modal) {

        if(modalState.video.currentVideo) {
            modalState.video.currentVideo.player.pause();
            modalState.video.currentVideo.player.load();
        }

        // Re-enable focusable elements.
        modalState.disabledHandler.disengage();
    }

    /**
     * Parses the JSON passed to the `data-izimodal-video` attribute.
     * The parsed data is then used to handle functionality of
     * `MediaElement.js` video player.
     *
     *
     *
     * Autoplay is currently the only option available.
     *
     * @example
     * <a href="#" data-izimodal-video='{"autoplay": true}' data-izimodal-open>Open Modal</a>
     *
     * @param {object} modal - iziModal instance
     */
    function handleVideoOptions(modal){

        // Fix for DX8 v5.5.0
        if(Drupal.behaviors.DX8MediaElement) {
            // Need to set the modal to display block because of the
            // CSS selector the `init.mediaelement.js` file that DX8
            // uses in the `attach` method won't find the modal:
            // ".coh-video > .coh-video-inner:not(".mejs__container"):visible"
            modal.$element.css({ display: 'block', opacity: 0});

            // Need to run DX8MediaElement behavior so we can create a
            // MediaElementJS instance of the video.
            Drupal.behaviors.DX8MediaElement.attach(modal.$element);

            // Reset the modal back to it's original state before
            // creating the MediaElementJS instance above.
            modal.$element.css({ display: 'none', opacity: 1});
        }

        // Handle options passed to `data-izimodal-video`
        if(modalState.$triggerEl.attr('data-izimodal-video')){
            try {
                var data         = modalState.$triggerEl.attr('data-izimodal-video');
                var options      = JSON.parse(data);
                var currentVideo = $('video', modal.$element)[0];
                var player       = currentVideo.player; // mediaelementjs instance

                // Store `currentVideo` on modalState so we can use it in other methods
                modalState.video.currentVideo = currentVideo;

                // Need to reset the video player size so the poster
                // image resizes correctly. It appears that setting
                // the height doesn't matter so we just set it to `0`.
                // We wrap it in a setTimeout so it resizes after the
                // modal is finished opening.
                setTimeout(function(){
                    player.setPlayerSize(modal.options.width, 0);
                },0)

                if(options.autoplay) {
                    player.play();
                }

            } catch (err) {
                console.log(err);
            }
        }
    }

})(jQuery, ally, drupalSettings, window);