const serviceMap = new Map();

async function getServices() {
	const url = "api/v1/list";
	try {
		const response = await fetch(url);
		if (!response.ok) {
			throw new Error(`Response status: ${response.status}`);
		}

		const json = await response.json();
		console.log(json);
		return json;
	} catch (error) {
		console.error(error.message);
	}
}

function updateStatus() {
	const statusElm = document.getElementById("status");
	const issuesElm = document.getElementById("issues");
	const issues = [...serviceMap.values()].filter((s) => !s).length;
	issuesElm.textContent = `${issues} issue(s) detected`;
	if (issues) {
		statusElm.setAttribute("class", "error");
	} else {
		statusElm.setAttribute("class", "ok");
	}
}

function updateService(statusElm, name, data) {
	switch (data.status) {
		case "ok": {
			statusElm.innerHTML = "";
			statusElm.textContent = "Ok";
			statusElm.setAttribute("class", "ok");
			serviceMap.set(name, true);
			break;
		}
		case "error": {
			const summaryElm = document.createElement("summary");
			summaryElm.textContent = "Error";

			const expandElm = document.createElement("code");
			expandElm.textContent = data.output;

			const detailsElm = document.createElement("details");
			detailsElm.appendChild(summaryElm);
			detailsElm.appendChild(expandElm);

			statusElm.innerHTML = "";
			statusElm.appendChild(detailsElm);
			statusElm.setAttribute("class", "error");
			serviceMap.set(name, false);
			break;
		}
	}

	updateStatus();
}

getServices().then((services) => {
	const evtSource = new EventSource("/api/v1/sse");
	evtSource.onmessage = (event) => {
		console.log(event.data);
	};

	for (const service of services) {
		const table = document.getElementById("services");
		const row = table.insertRow();
		const nameElm = row.insertCell();
		nameElm.textContent = service;
		const statusElm = row.insertCell();

		evtSource.addEventListener(service, (event) => {
			data = JSON.parse(event.data);
			updateService(statusElm, service, data);
			console.log(`service: ${service}, event: ${event}`);
		});
	}
});