import getYouTubeID from 'get-youtube-id';
import './_hero-block.scss'
import $ from 'jquery';
import 'jquery.marquee';

const heroBlock = function() {

    // Execute the following scripts
    if (!$('.block-editor-block-list__layout').length) {
        let bg = $('.marquee-wrapper').attr('data-bg-color');
        let direction = $('.marquee-wrapper').attr('data-direction');
        $('.marquee').marquee({
            delayBeforeStart: 0,
            duration: 15000,
            direction: direction,
            duplicated: true,
            pauseOnHover: true,
        });
        $('.marquee-wrapper').css({
            'background-color': bg,
        });
    }

    if ($('.image-wrapper').length) {
        let bgColor = $('body').attr('data-bg-color');
        $('.image-wrapper').css({
            'background-color': bgColor,
        });
    }

    if ($('.hero-block .video__external').length) {
        $('.hero-block').each(function() {
            let getYouTubeID = require('get-youtube-id');
            let video_url = $(this).find('.video__external').attr('data-youtube-id');
            let video_id = getYouTubeID(video_url);
            let show_controls = $(this).find('.video__external').attr('data-show-controls');
            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) + '&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() {
    heroBlock()
}, false);

window.addEventListener('acf/loaded/hero-block', function(e) {
    heroBlock()
});