import { Notifier } from "./Notifier.js";
import { ProgressBar } from "./ProgressBar.js";
import { VideoCompressor } from "./VideoCompressor.js";

const notifier = new Notifier();
const progressBar = new ProgressBar();
const videoCompressor = new VideoCompressor(progressBar);

document.getElementById("compress").onclick = async () => {
	document.getElementById("uploaded-video").pause();
	showSection("loading");

	const filesize = document.getElementById("filesize").value;
	const filesizeUnit = document.getElementById("filesize-unit").value;
	const file = document.getElementById("file-input").files[0];

	const videoLength = document.getElementById("uploaded-video").duration;

	let targetFilesize;
	switch (filesizeUnit) {
		case "kb": targetFilesize = filesize * 1000; break;
		case "mb": targetFilesize = filesize * 1000000; break;
	}

	try {
		const url = await videoCompressor.compress(file, targetFilesize, videoLength);

		if (!url) return;

		notifier.notifyFinished();

		location.href = url;
	} catch (e) {
		alert(e.message);

		showSection("file-picker");
	}
};

document.getElementById("cancel").onclick = () => {
	videoCompressor.stop();

	showSection("file-picker");
};

function openFileSelector() {
	document.getElementById("file-input").click();
}

document.getElementById("file-drop-area").onclick = openFileSelector;
document.getElementById("change-file").onclick = openFileSelector;

document.getElementById("file-input").oninput = () => {
	setTimeout(() => {
		const file = document.getElementById("file-input").files[0];

		document.getElementById("uploaded-video").src = URL.createObjectURL(file);
		document.getElementById("uploaded-video").load();

		hideElements("#file-drop-area", "#file-input-spacing");
		showElements("#uploaded-video", "#change-file");
	}, 200);
};

window.onbeforeunload = event => {
	if (videoCompressor.inProgress) event.preventDefault();
};