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);
			} else {
				alert("Please upload a valid image file.");
				return;
			}
		}
	});

	document.getElementById("downloadPng").addEventListener("click", () => {
		const canvas = document.getElementById("cv");
		const link = document.createElement("a");
		link.download = "canvas.png";
		link.href = canvas.toDataURL();
		link.click();
	});

	document.getElementById("downloadWebp").addEventListener("click", () => {
		const canvas = document.getElementById("cv");
		const link = document.createElement("a");
		link.download = "canvas.webp";
		link.href = canvas.toDataURL("image/webp");
		link.click();
	});

	document.addEventListener("drag", () => {
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragenter", () => {
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragover", (e) => {
		e.preventDefault();
		document.getElementById("dragOverlay").style.display = "";
	});
	document.addEventListener("dragend", (e) => {
		e.preventDefault();
		document.getElementById("dragOverlay").style.display = "none";
	});
	document.addEventListener("dragleave", () => {
		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);
			} else {
				alert("Please upload a valid image file.");
				return;
			}
		}
	});
});

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