const events = JSON.parse(window.localStorage.getItem("events")) ?? [];
console.log(events);
events.forEach((event) => addEventToDom(event));

const portal = document.getElementById("portal");
const addEventDialogBox = document.getElementById("addEventDialogBox");
const editEventDialogBox = document.getElementById("editEventDialogBox");
const addEventForm = document.getElementById("addEventForm");

function openPortal(type, id) {
	portal.style.display = "block";
	if (type == "add") {
		addEventDialogBox.style.display = "block";
		document.getElementById("addEventDay").value =
			id.charAt(0).toUpperCase() + id.slice(1);
	}
	if (type == "edit") {
		editEventDialogBox.style.display = "block";
	}
}

function closePortal() {
	portal.style.display = "none";
	addEventDialogBox.style.display = "none";
	editEventDialogBox.style.display = "none";
}

function dayEventListener(e) {
	console.log(e);
	openPortal("add", e.target.id);
}

function addEventToDom(event) {
	const container = document.createElement("div");
	container.classList.add("event");
	container.style.gridRowEnd = `span ${event.length}`;
	container.style.gridRowStart = `${event.startTime - 6}`;

	const title = document.createElement("h4");
	title.innerHTML = event.name;
	title.classList.add("eventTitle");
	title.style.webkitLineClamp = `${event.length == 1 ? 2 : 8}`;
	container.appendChild(title);

	const time = document.createElement("p");
	time.innerHTML = `${event.startTime}:00-${event.startTime + event.length}:00`;
	time.classList.add("eventTime");
	container.appendChild(time);

	document.getElementById(event.day).appendChild(container);

	container.addEventListener("click", (e) => {
		e.stopPropagation();
	});
}

function submitAddEventForm(e) {
	e.preventDefault();
	console.log(e);
	console.log(addEventForm.elements.addEventStartTime.value);

	const event = {
		name: addEventForm.elements.addEventName.value,
		day: addEventForm.elements.addEventDay.value.toLowerCase(),
		startTime: parseInt(
			addEventForm.elements.addEventStartTime.value.split(":")[0]
		),
		length: parseInt(addEventForm.elements.addEventLength.value),
	};
	events.push(event);
	window.localStorage.setItem("events", JSON.stringify(events));

	addEventToDom(event);

	closePortal();
}

function addClickListeners() {
	const days = document.getElementsByClassName("dayEvents");
	console.log(days);
	Array.from(days).forEach((day) => {
		day.addEventListener("click", dayEventListener);
	});

	portal.addEventListener("click", () => {
		closePortal();
	});
	addEventDialogBox.addEventListener("click", (e) => {
		e.stopPropagation();
	});
	editEventDialogBox.addEventListener("click", (e) => {
		e.stopPropagation();
	});

	addEventForm.addEventListener("submit", submitAddEventForm);
}

addClickListeners();