"use strict";

class VideoContainer {
    constructor() {
        this.query_selector = '#modal-video-container';
        this.addEventListeners();
    }

    setVisible(option) {
        if (option) {
            this.element.classList.add('active');
        } else {
            this.video.pause();
            this.element.classList.remove('active');
            this.downloadVideoPrepare.classList.add('active');
            this.downloadVideoLoading.classList.remove('active');
            this.downloadVideo.classList.remove('active');
        }
    }
    
    addEventListeners() {
        this.downloadVideoPrepare.addEventListener('click', this.downloadPrepareHandler.bind(this));
        this.closeAndResetVideoContainer.addEventListener('click', (event) => {
            this.setVisible(false); 
        });
    }

    downloadPrepareHandler(event) {
        this.downloadVideoPrepare.classList.remove('active');
        this.downloadVideoLoading.classList.add('active');
        this.generateBlobVideo(this.URLVideo).then( blob => {
            this.downloadVideo.href = URL.createObjectURL(blob);
            this.downloadVideo.download = this.filename; 
            this.downloadVideoLoading.classList.remove('active');
            this.downloadVideo.classList.add('active');
        });
   
    }

    async generateBlobVideo(url) {
        const blob = await fetch(url, { mode: 'cors', })
          .then(res => res.blob())
          .catch( err => this.generateBlobVideoByProxy(url) );
        return blob;
    }

    async generateBlobVideoByProxy(url) {
        const blob = await fetch( '/proxy_to_get', {
                method: 'POST',
                mode: 'cors',
                cache: 'no-cache',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({url: url}),
            }
        ).then(res => res.blob());
        return blob;
     }

    onCanPlay(callback) {
        video.addEventListener('canplay', (event) => {
            callback();
        });
    }
    
    setURLVideo(url) {
        this.url_video = url;
        video.src = url;
    }

    setFilename(filename) {
        this.filename = filename;
    }

    get closeAndResetVideoContainer() {
        return this.element.querySelector('#close-and-reset-video-container');
    }

    get downloadVideo() { 
        return this.element.querySelector('#download-video');
    }

    get URLVideo() {
        return this.url_video;
    }

    get closeAndResetVideoContainer() {
        return this.element.querySelector('#close-and-reset-video-container');
    }

    get downloadVideoLoading() {
        return this.element.querySelector('#download-video-loading');
    }

    get downloadVideoPrepare() {
        return this.element.querySelector('#download-video-prepare');
    }

    get video() {
        return this.element.querySelector('#video');
    }

    get element() {
        return document.querySelector(this.querySelector);
    }

    get querySelector() {
        return this.query_selector;
    }
}

export { VideoContainer };