Aquarius.component.define('Widget/Youtube', function ($element, options) {

    var defaults = {
        ytId: null
    };

    function Youtube() {
    }

    Youtube.prototype = {
        init: function () {
            var self = this;

            this.$element = $element;
            this.options = Aquarius.extend(defaults, options);

            this.youtubeCover = $('#yt-cover');
            this.youtubeHolder = $('#yt-holder-holder');

            this.yt();
        },
        events: function (ytEvents) {
            const self = this;

            self.youtubeCover.addClass('ready');

            this.youtubeCover.off('click').on('click', function () {
                $(this).addClass('active');
                self.youtubeHolder.addClass('active');
                ytEvents.target.playVideo();
            });
        },

        yt: function () {
            const self = this;
            const tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            const firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            let player;
            window.onYouTubePlayerAPIReady = function () {
                player = new YT.Player('yt-holder', {
                    height: '390',
                    width: '640',
                    videoId: self.options.ytId,
                    playerVars: {
                        'playsinline': 1
                    },
                    events: {
                        'onReady': onPlayerReady
                    }
                });
            }

            function onPlayerReady(event) {
                $('#yt-holder').addClass('embed-responsive-item');
                self.events(event);
            }
        }
    };

    return Youtube;
});