const uploadBox = document.getElementById('upload-box');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventType => {
	uploadBox.addEventListener(eventType, preventDefaults, false)
});

['dragenter', 'dragover'].forEach(eventType => {
	uploadBox.addEventListener(eventType, colorDZ, false)
});

['dragleave', 'drop'].forEach(eventType => {
	uploadBox.addEventListener(eventType, clearDZ, false)
});

uploadBox.addEventListener('drop', handleFileDrop, false);

function colorDZ(e) {
	e.target.classList.add("active")
}

function clearDZ(e) {
	e.target.classList.remove("active")
}

document.getElementById("form").addEventListener("submit", handleFormSubmit)

let allFiles = [];


function handleFileDrop(e) {
	const dataTransfer = e.dataTransfer
	const files = dataTransfer.files
	allFiles = [...allFiles, ...files]
	console.log(allFiles)
}

function preventDefaults(e) {
	e.preventDefault()
	e.stopPropagation()
}

function handleFormSubmit(e) {
	preventDefaults(e)
	sendFiles()
	allFiles = []
}

async function sendFiles() {
	const formData = new FormData();

	formData.append("expration", "1000");
	allFiles.forEach((f) => formData.append("file", f));

	const response = await fetch("/api/upload", {
		method: "POST",
		body: formData,
	})

	console.log(response);
}