const notifications = document.querySelector(".notifications");
const fileContainer = document.querySelector(".file-container");
const label = document.querySelector("#label-input");
const inputFile = document.querySelector("#document-input");
const form = document.querySelector("form");

const result_img = document.querySelector(".result_img");
const img_wrapper = document.querySelector(".img-wrapper");
const text_result = document.querySelector(".result-text");

const toast = (message, type) => {
	const notification = document.createElement("div");

	notification.innerHTML = `
		<i class="fa fa-xmark close" onclick="this.parentNode.remove()"></i>
        <i class="fa-solid ${
					type === "error" ? "fa-circle-xmark" : "fa-triangle-exclamation"
				} icon"></i>
    
      <div class="notification-content">
        <h3>${type}</h3>
        <p>${message}</p>
      </div>
    `;
	notification.classList.add(...["notification", type]);
	notifications.appendChild(notification);
	setTimeout(() => {
		notification.remove();
	}, 5000);
};

let file = null;
const SUPPORTED_EXT = ["jpg", "png", "jpeg"];

function clear() {
	file = null;
	label.style.display = "flex";
	fileContainer.innerHTML = "";
}
const upload = (fileData) => {
	file = fileData;
	const ext = file.name.split(".").pop();
	let isvalid = SUPPORTED_EXT.some((s_ext) => s_ext === ext);
	if (isvalid) {
		label.style.display = "none";
		fileContainer.innerHTML = `
        <div class="file-wrapper">
                    <i class="fa fa-file-image"></i>
                    <p>
                        ${file.name}
                    </p>
                    <button id='btn-clear' type="button" ><i class="fa fa-close" ></i></button>
        </div>
        `;
		document
			.querySelector("#btn-clear")
			.addEventListener("click", (e) => clear(e));
	} else {
		console.error("file is not supported");
		toast("file is not supported", "error");
	}
};

inputFile.addEventListener("change", (e) => {
	e.preventDefault();
	if (inputFile.files[0]) upload(inputFile.files[0]);
});

label.addEventListener("dragover", (e) => {
	e.preventDefault();
});
label.addEventListener("drop", (e) => {
	e.preventDefault();
	upload(e.dataTransfer.files[0]);
});
form.addEventListener("submit", async (e) => {
	e.preventDefault();
	if (!file) {
		toast("No Image selected ...", "warning");
	} else {
		const data = new FormData();
		data.append("file_img", file);
		const response = await fetch("/interpret", {
			method: "post",
			body: data,
		});
		const result = await response.json();
		if (result.error) {
			toast(result.error, "error");
			console.log(result.error);
			return;
		}
		text_result.innerHTML = result.caption;
	}
});