"use strict";

let downloadFormButton;
let modalVideoContainer;
let closeAndResetVideoContainer;
let downloadFormUrl;
let downloadVideo;
let downloadVideoPrepare;
let downloadVideoLoading;
let downloadForm;
let video;
let modalLoading;
let filename;
let url;
let popingNotice;
let closePopingNotice;

function downloadFormButtonHandler(event) {
    event.preventDefault();
    modalLoading.classList.add('active');
    getRealURL(downloadFormUrl.value).then( (response) => {
        video.src = response.url;
        filename = response.filename;
        url = response.url;
        video.addEventListener('canplay', (event) => {
            modalLoading.classList.remove('active');
            modalVideoContainer.style.display = 'block';
        });
    });
}

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

function downloadFormHandler(event) {
    downloadFormButtonHandler(event);
}

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

async function 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;
 }

async function getRealURL(url) {
    const response = await fetch('/api', {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({url: url}),
    });
    return response.json();
}

function closeAndResetVideoContainerHandler(event) {
    event.preventDefault();
    modalVideoContainer.style.display = 'none';
    downloadVideo.classList.remove('active');
    downloadVideoLoading.classList.remove('active');
    downloadVideoPrepare.classList.add('active');
}

window.addEventListener('load', (event) => {
    downloadFormButton = document.querySelector('#download-form-button');
    downloadForm = document.querySelector('#download-form');
    modalVideoContainer = document.querySelector('#modal-video-container');
    video = document.querySelector('#video');
    downloadFormUrl = document.querySelector('#download-form-url');
    downloadVideo = document.querySelector('#download-video');
    downloadVideoLoading = document.querySelector('#download-video-loading');
    downloadVideoPrepare = document.querySelector('#download-video-prepare');
    closeAndResetVideoContainer = document.querySelector('#close-and-reset-video-container');
    modalLoading = document.querySelector('#modal-loading');
    popingNotice = document.querySelector('#poping-notice');
	closePopingNotice = document.querySelector('#close-poping-notice');

    downloadFormButton.addEventListener('click', downloadFormButtonHandler);
    downloadVideoPrepare.addEventListener('click', downloadVideoPrepareHandler);
    downloadForm.addEventListener('submit', downloadFormHandler);
    closeAndResetVideoContainer.addEventListener('click', closeAndResetVideoContainerHandler);
	closePopingNotice.addEventListener('click', (event) => {
		popingNotice.classList.remove('active');
	});

    popingNotice.classList.add('active');
});