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();

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

	if (!file) {
		alert("Please select a file");
		return;
	}

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

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

	showSection("loading");

	let result;
	try {
		result = await videoCompressor.compress(file, targetFilesize, videoLength);
	} catch (e) {
		alert(e.message);

		showSection("file-picker");

		return;
	}

	if (!result) return;

	notifier.notifyFinished();

	const url = URL.createObjectURL(result);

	document.getElementById("compressed-video").src = url;
	document.getElementById("compressed-video").load();

	document.getElementById("result-size").innerText = bytesToSizeString(result.size);

	document.getElementById("download").onclick = () => {
		const a = document.createElement("a");
		a.href = url;
		a.download = result.name;
		a.click();
	};

	const shareData = {
		text: "Compressed using " + window.origin,
		files: [result],
	};

	if (navigator.share && (!navigator.canShare || navigator.canShare(shareData))) {
		document.getElementById("share").style.display = "inline-block";
		document.getElementById("share").onclick = () => navigator.share(shareData);
	} else {
		document.getElementById("share").style.display = "none";
	}

	showSection("result");
};

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-drop-area").onkeydown = event => {
	if (['Enter', 'Space'].includes(event.code))
		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);
};

document.getElementById("back").onclick = () => {
	showSection("file-picker");
};

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

function bytesToSizeString(bytes) {
	if (bytes >= 1000000000) return (bytes / 1000000000).toFixed(1) + " GB";
	if (bytes >= 1000000) return (bytes / 1000000).toFixed(1) + " MB";
	if (bytes >= 1000) return (bytes / 1000).toFixed(1) + " KB";
	return bytes + " B";
}