window.addEventListener("DOMContentLoaded", () => {
	document.getElementById("upload").addEventListener("input", () => {
		if(document.getElementById("upload").files.length > 0) {
			const file = document.getElementById("upload").files[0];
			let image;
			if (file.type.startsWith("image/")) {
				image = URL.createObjectURL(file);
				renderImageOnCanvas(image);
				document.getElementById("filename").innerText = file.name;
			} else {
				alert("Please upload a valid image file.");
				return;
			}
		}
	});

	document.getElementById("downloadPng").addEventListener("click", () => {
		downloadPictureFromCanvas("image/png");
	});

	document.getElementById("downloadWebp").addEventListener("click", () => {
		downloadPictureFromCanvas("image/webp");
	});

	let dragCounter = 0;
	document.addEventListener("drag", () => {
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragenter", () => {
		dragCounter++;
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragover", (e) => {
		e.preventDefault();
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragleave", (e) => {
		dragCounter--;
		if (dragCounter <= 0) {
			document.getElementById("dragOverlay").style.display = "none";
		}
	});
	document.addEventListener("drop", (e) => {
		e.preventDefault();
		document.getElementById("dragOverlay").style.display = "none";
		const files = e.dataTransfer.files;
		if (files.length > 0) {
			const file = files[0];
			let image;
			if (file.type.startsWith("image/")) {
				image = URL.createObjectURL(file);
				renderImageOnCanvas(image);
				document.getElementById("filename").innerText = file.name;
			} else {
				alert("Please upload a valid image file.");
				return;
			}
		}
	});
});

function downloadPictureFromCanvas(fileType) {
	const canvas = document.getElementById("cv");
	const link = document.createElement("a");
	const originalFilename = document.getElementById("filename").innerText;
	link.download = originalFilename.replace(/\.[^/.]+$/, "");
	link.href = canvas.toDataURL(fileType);
	link.click();
}

function renderImageOnCanvas(image) {
	const canvas = document.getElementById("cv");
	const ctx = canvas.getContext("2d");
	const img = new Image();
	img.src = image;
	img.onload = () => {
		canvas.width = img.width;
		canvas.height = img.height;
		ctx.drawImage(img, 0, 0);
	};
}