import {
	GraduationChange,
	submitGraduationChange
} from "../../js/graduation-ENV.js";

import { fetchBycsGroups } from "../../js/group.js";
import { initSelection } from "../../js/selection.js";

let group;

function observationClickHandler(li, student) {
	const observationDiv = document.createElement("div");
	observationDiv.id = "group-member-observation-container";
	observationDiv.popover = true;
	li.appendChild(observationDiv);

	const submitBtn = document.createElement("button");
	submitBtn.id = "group-member-observation-submit";
	observationDiv.appendChild(submitBtn);
}

function pointClickHandler(li, student, color) {
	const textareaDiv = document.createElement("div");
	textareaDiv.id = "group-member-point-reason-container";
	li.appendChild(textareaDiv);

	const textarea = document.createElement("textarea");
	textarea.id = "group-member-point-reason";
	textareaDiv.appendChild(textarea);

	const submitBtn = document.createElement("button");
	submitBtn.id = "group-member-point-reason-submit";
	textareaDiv.appendChild(submitBtn);

	// TODO(muhq): Prefill the textarea with common reasons
	switch (color) {
	case "green":
		textarea.style.background = "rgb(from green r g b / 20%)"
		textarea.value = "";
		break;
	case "orange":
		textarea.style.background = "rgb(from orange r g b / 20%)"
		textarea.value = "";
		break;
	case "red":
		textarea.style.background = "rgb(from red r g b / 20%)"
		textarea.value = "";
		break;
	}
	textarea.focus();

	let submit = function() {
		let change;
		switch (color) {
		case "green":
			change = GraduationChange.newGreenPointChange(student, textarea.value);
			break;
		case "orange":
			change = GraduationChange.newOrangePointChange(student, textarea.value);
			break;
		case "red":
			change = GraduationChange.newRedPointChange(student, textarea.value);
			break;
		default:
			alert("Invalid color");
			break;
		}
		submitGraduationChange(student, change);
		li.removeChild(textareaDiv);
	}

	// Use onEVENT to override any previous handler
	textarea.onkeydown = function(e) {
		if (e.shiftKey && e.key === "Enter") {
			submit();
		}
		if (e.key === "Escape") {
			textareaDiv.style.display = "none";
		}
	};
	submitBtn.onclick = submit;
}

async function loadGroup(selected) {
	group = selected;
	const students = await group.getStudents();
	document.getElementById("group-content").style.display = "block";

	const ul = document.getElementById("group-members");
	// Clear group list
	ul.innerHTML = "";

	for (const student of students) {
		const li = document.createElement("li");
		li.classList.add("group-member")

		const ob = document.createElement("button");
		ob.classList.add("group-member-observation-icon")
		ob.popovertarget="group-member-observation-popover"
		student.getGraduation().then((graduation) => {
			if (!graduation.isObserved()) {
				return;
			}
			ob.innerHTML = "&#128065"
			ob.addEventListener("click", () => observationClickHandler(li, student) );
		});
		li.appendChild(ob);

		const i = document.createElement("img");
		i.classList.add("group-member-icon")
		student.getGraduation().then((graduation) => {
			i.src = graduation.getIcon();
		});
		// TODO: fetch the students state icon
		li.appendChild(i);

		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 b = document.createElement("button");
			b.classList.add(`group-member-${col}`)
			b.innerHTML = col;
			b.addEventListener("click", () => pointClickHandler(li, student, col));
			li.appendChild(b);
		}

		const p = document.createElement("button");
		p.classList.add("group-member-print")
		p.innerHTML = `print`;
		p.addEventListener("click", () => print() );
		li.appendChild(p);

		ul.appendChild(li);
	}
}

window.onload = function() {
	initSelection(
		"group-selection",
		async function() { return (await fetchBycsGroups()).values(); },
		(group) => `${group.name}`,
		loadGroup,
	);
	name = getName();
}