//also @See video.blade.php
class Video {
    constructor(videoElementWrapper) {
        if(videoElementWrapper === undefined || videoElementWrapper.tagName !== "DIV") {
            console.error('VideoElement:constructor Missing the expected div element that represents the VideoElementWrapper.'); return;
        }

        this._videoElementWrapper = videoElementWrapper;

        if(!('key' in videoElementWrapper.dataset)) {
            console.error('VideoElement:constructor Missing the key dataset property on the videoElementWrapper'); return;
        }
        let key = videoElementWrapper.dataset.key;


        let realInput = videoElementWrapper.querySelector('input[name="'+key+'"]');
        if(!realInput) {
            console.error('VideoElement:constructor Did not find a required hidden input with name "'+key+'" in the VideoElementWrapper.'); return;
        }
        this._realInput = realInput;
        

        let realCheckbox = videoElementWrapper.querySelector('input[name="'+key+'_autoplay"]');
        if(!realCheckbox) {
            console.error('VideoElement:constructor Did not find a required checkbox input of type checkbox with name "'+key+'_autoplay" in the VideoElementWrapper.'); return;
        }
        this._realCheckbox = realCheckbox;


        let videoIdInput = videoElementWrapper.querySelector('input[name="'+key+'_video_id"]');
        if(!videoIdInput) {
            console.error('VideoElement:constructor Did not find a required input of type text with name "'+key+'_video_id" in the VideoElementWrapper.'); return;
        }
        this._videoIdInput = videoIdInput;

        this._videoWatchPath = 'https://www.youtube.com/watch?v={videoInputValue}';
        this._videoImgPath = 'https://img.youtube.com/vi/{videoInputValue}/0.jpg';

        this.initialize();
        this.enableEventListeners();
    }

    enableEventListeners()
    {
        this._videoIdInput.addEventListener('keyup', this.updateRealInput.bind(this));
        this._realCheckbox.addEventListener('change', this.updateRealInput.bind(this));
    }

    updateRealInput(event)
    {
        let autoPlayCheckboxValue = (this._realCheckbox.checked === true) ? '1': '0';

        const videoInputValue = this._videoIdInput.value;
        this._realInput.value = autoPlayCheckboxValue+','+videoInputValue;
        this.updateThumbnail(videoInputValue);
    }

    /**
     * Generate a thumbnail with link to the video
     *
     * @param videoInputValue
     */
    updateThumbnail(videoInputValue)
    {

        // Get the attribute that will change
        const videoLink = this._videoElementWrapper.querySelector('.js-video-link');
        const videoThumb = this._videoElementWrapper.querySelector('.js-video-thumb');


        // Remove the attribute if the input is empty
        if(!isset(videoInputValue) || videoInputValue === ''){
            videoThumb.removeAttribute('src');
            videoLink.removeAttribute('href');
            return;
        }

        // Get the videoThumbPath
        const videoThumbPath = this._getYoutubePath(videoInputValue);

        // TODO: Create something like this to prevent the ugly video not found image of youtube
        // this._ifVideoThumbnailExists(videoThumbPath)

        // Set the attribute to preview the thumbnail with a link to the video
        videoThumb.setAttribute('src',  videoThumbPath);
        videoLink.setAttribute('href', this._getYoutubePath(videoInputValue, 'watch'));

    }

    /**
     * Grab the desired path for a youtube link or thumbnail
     *
     * @param {string} videoInputValue
     * @param {string} type
     * @returns {string}
     * @private
     */
    _getYoutubePath(videoInputValue, type = 'thumbnail')
    {
        let path = '';

        // Grab the desired path and replace the placeholder with the input
        switch (type) {
            case 'thumbnail':
                path = this._videoImgPath;
                return path.replace("{videoInputValue}", videoInputValue);

            case 'watch':
                path = this._videoWatchPath;
                return path.replace("{videoInputValue}", videoInputValue);

            default:
                console.alert('VideoElement:_getPath Type rule not defined');
                return '';
        }
    }

    // _ifVideoThumbnailExists(videoThumbPath){
    //
    //     Ajax.get(videoThumbPath, function (response) {
    //        console.log(response);
    //     });
    //
    // }

    initialize()
    {
        //Get autoplay value and video id from the hidden input
        if(this._realInput.value === "") return;
        let splittedValue = this._realInput.value.split(',');
        if(splittedValue.length < 2) console.error('VideoElement:initialize Could not initialize a video element because it received an invalid value: ', this._realInput.value);
        let autoplayCheckboxValue = splittedValue[0];
        let videoIdInputValue = splittedValue[1];

        //Set the video id input with the videoIdInputValue
        this._videoIdInput.value = videoIdInputValue;
        this.updateThumbnail(videoIdInputValue);

        //Set the checkbox using the autoplayCheckbox value
        this._realCheckbox.checked = autoplayCheckboxValue === '1';
    }
}