import './_full-width-image.scss'
import $ from 'jquery'

const fullWidthImage = function() {

    if ($('.full-width-image').length) {
        $('.full-width-image').on('mouseenter', function(e) {
            $(this).addClass('hover');
            $(this).find('a.cta').addClass('hover');
        }).on('mouseleave', function() {
            $(this).removeClass('hover');
            $(this).find('a.cta').removeClass('hover');
        });
    }

    if ($('.full-width-image .video__external').length) {
        $('.full-width-image').each(function() {

            let getYouTubeID = require('get-youtube-id');
            let video_url = $(this).find('.video__external').attr('data-youtube-id');
            let show_controls = $(this).find('.video__external').attr('data-show-controls');
            let video_id = getYouTubeID(video_url);
            let video_player = '<iframe frameborder="0" height="100%" width="100%" frameborder="0" allowfullscreen src="https://youtube.com/embed/' + video_id + '?autoplay=1&loop=1&rel=0&autohide=1&showinfo=0&controls=' + (show_controls == 'yes' ? 1 : 0) + '1&mute=1&playlist=' + video_id + '" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;web-share" allow="autoplay" data-id="' + video_id + '"></iframe>';

            $(this).find('.video__external').html(video_player);

        });

    }

};

document.addEventListener('DOMContentLoaded', function() {
    fullWidthImage()
}, false);

window.addEventListener('acf/loaded/full-width-image', function(e) {
    fullWidthImage()
});