import { fetchStudents } from "./student-ENV.ts";

import { getName } from "./utils-ENV.js";

let name;

async function loadGroup() {
	const students = await fetchStudents();
	const graduationPromises = [];
	document.getElementById("group-content").style.display = "block";

	const ul = document.getElementById("group-members");

	ul.innerHTML = "";

	const listEntries = [];
	for (const student of students) {
		const graduationPromise = student.getGraduation();
		graduationPromises.push(graduationPromise);

		const li = document.createElement("li");
		li.student = student;
		listEntries.push(li);

		const i = document.createElement("img");
		i.classList.add("group-member-icon");
		graduationPromise.then((graduation) => {
			i.src = graduation.getIcon();
		});
		li.appendChild(i);
	}

	const graduations = await Promise.all(graduationPromises);

	for (const li of listEntries) {
		const student = li.student;
		if (!student.graduation.coaches.includes(name))
			continue;

		const n = document.createElement("span");
		n.classList.add("group-member-name");
		n.innerHTML = `${student.name}`;
		li.appendChild(n);

		for (const col of ["green", "orange", "red"]) {
			const s = document.createElement("span");
			s.classList.add(`group-member-${col}`);
			switch (col) {
				case "green":
					s.innerHTML = student.graduation.green;
					break;
				case "orange":
					s.innerHTML = student.graduation.orange;
					break;
				case "red":
					s.innerHTML = student.graduation.red;
					break;
			}
			li.appendChild(s);
		}

		const p = document.createElement("span");
		p.classList.add("group-member-points");
		p.innerHTML = `∑ ${student.graduation.getNettoPoints()}`;
		li.appendChild(p);

		li.classList.add("group-member");
		ul.appendChild(li);
	}
}

async function init() {
	name = getName();
	loadGroup();
}

if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", init);
} else {
	init();
}