const serviceMap = new Map();
const elementMap = 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 createStatusTbody(name, data) {
	const tbody = document.createElement("tbody");

	const trowService = document.createElement("tr");
	const tdataName = document.createElement("td");
	tdataName.textContent = name;
	trowService.appendChild(tdataName);

	const tdataStatus = document.createElement("td");
	switch (data.status) {
		case "ok": {
			tdataStatus.textContent = "Ok";
			tdataStatus.setAttribute("class", "ok");
			serviceMap.set(name, true);
			break;
		}
		case "error": {
			tdataStatus.textContent = "Error";
			tdataStatus.setAttribute("class", "error");
			serviceMap.set(name, false);
			break;
		}
	}

	trowService.appendChild(tdataStatus);
	tbody.appendChild(trowService);

	if (data.output) {
		const trowOutput = document.createElement("tr");
		trowOutput.setAttribute("class", "details");
		const tdataOutput = document.createElement("td");
		tdataOutput.textContent = data.output;
		tdataOutput.setAttribute("colspan", "2");
		trowOutput.appendChild(tdataOutput);
		tbody.appendChild(trowOutput);
	}

	return tbody;
}

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");
		let tbody = createStatusTbody(service, { "data": "ok" });
		table.appendChild(tbody);

		evtSource.addEventListener(service, (event) => {
			data = JSON.parse(event.data);
			tbodyNew = createStatusTbody(service, data);
			tbody.replaceWith(tbodyNew);
			tbody = tbodyNew;
			updateStatus();
		});
	}
});