//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.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';
        this._realInput.value = autoPlayCheckboxValue+','+this._videoIdInput.value;
    }

    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;

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