import './_two-cols-image.scss'
import $ from 'jquery'

const twoColsImage = function() {

    if ($('.two-cols-image').length) {
        $('.two-cols-image .image-block').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');
        });

        let headigHeight = $('.image-block:first-of-type').find('a.cta').outerHeight();
        let nextHeadigHeight = $('.image-block:nth-of-type(2)').find('a.cta').outerHeight();

        function calcHeadingHeight() {
            if (headigHeight > nextHeadigHeight) {
                $('.image-block:nth-of-type(2)').find('a.cta').css({
                    'height': headigHeight,
                });
            } else {
                $('.image-block:first-of-type').find('a.cta').css({
                    'height': nextHeadigHeight,
                });
            }
        }

        window.addEventListener('resize', calcHeadingHeight, true);
        window.addEventListener('load', calcHeadingHeight, true);

    }

    if ($('.two-cols-image .video__external').length) {
        $('.two-cols-image').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() {
    twoColsImage()
}, false);

window.addEventListener('acf/loaded/two-cols-image', function(e) {
    twoColsImage()
});