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

import { fetchGroups } from "../../js/group.js";
import { initSelection } from "../../js/selection.js";
import { getName } from "../../js/utils-ENV.js";

let group;
let name;

function toggle(btn) {
	if (btn.innerHTML === "X")
		btn.innerHTML = "o";
	else
		btn.innerHTML = "X";

	document.getElementById("submit-mass-graduation").style.display = "block";
}

function observationClickHandler(ob, li) {
	ob.style.background = "lightgray";

	let observationDiv = li.observationDiv;
	// Build the observation container
	if(!observationDiv) {
		observationDiv = document.createElement("div");
		// Remember the observation div for this student
		li.observationDiv = observationDiv;
		observationDiv.id = `${li.student.name}-observation-container`;
		observationDiv.classList.add("group-member-observation-container");
		li.appendChild(observationDiv);

		const obsTbl = document.createElement("table");
		obsTbl.id = "group-member-observation-table";
		observationDiv.appendChild(obsTbl);

		const obsTh = document.createElement("thead");
		obsTh.innerHTML = "<tr><td></td><td>Ja</td><td>Nein</td></tr>";
		obsTbl.appendChild(obsTh);

		const obsTbdy = document.createElement("tbody");
		obsTbl.appendChild(obsTbdy);

		for (const obsType of OBSERVATION_TYPES) {
			const obsTr = document.createElement("tr");

			const obsDesc = document.createElement("td");
			obsDesc.innerHTML = obsType;
			obsTr.appendChild(obsDesc);

			const obsYes = document.createElement("td");
			obsYes.innerHTML = "o";
			obsYes.addEventListener("click", () => toggle(obsYes));
			obsYes.dataset.yes = "true";
			obsTr.appendChild(obsYes);

			const obsNo = document.createElement("td");
			obsNo.innerHTML = "o";
			obsNo.addEventListener("click", () => toggle(obsNo) );
			obsTr.appendChild(obsNo);

			obsTbdy.appendChild(obsTr);
		}
	// Toggle the observation container visibility
	} else {
		if (observationDiv.style.display === "none") {
			observationDiv.style.display = "block";
		} else {
			observationDiv.style.display = "none";
		}
	}
}

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")
		// Remember the student of the entry
		li.student = student;

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

		const i = document.createElement("img");
		i.classList.add("group-member-icon")
		student.getGraduation().then((graduation) => {
			i.src = graduation.getIcon();
		});
		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 = "o";
			b.addEventListener("click", () => toggle(b) );
			li.appendChild(b);
		}

		const textarea = document.createElement("textarea");
		textarea.classList.add("group-member-point-reason");
		li.appendChild(textarea);

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

		ul.appendChild(li);
	}
}

function submitMassGraduation() {
	for(const li of document.querySelectorAll("li.group-member")) {
		const reason = li.querySelector(".group-member-point-reason").value;
		const student = li.student;
		if (li.querySelector(".group-member-green").innerHTML === "X") {
			submitGraduationChange(student, GraduationChange.newGreenPointChange(reason, name));
		}
		if (li.querySelector(".group-member-orange").innerHTML === "X") {
			submitGraduationChange(student, GraduationChange.newOrangePointChange(reason, name));
		}
		if (li.querySelector(".group-member-red").innerHTML === "X") {
			submitGraduationChange(student, GraduationChange.newRedPointChange(reason, name));
		}
		if (li.observationDiv) {
			let status = [];
			for (const row of li.observationDiv.querySelectorAll("tbody > tr")) {
				status.push(row.querySelector('td[data-yes="true"]').innerHTML === "X");
			}
			submitObservation(student, new Observation(Date.now(), status));
		}
	}
}

function printRedPointNote(li) {
	print();
}

window.onload = function() {
	initSelection(
		"group-selection",
		async function() { return (await fetchGroups()).values(); },
		(group) => `${group.name}`,
		loadGroup,
	);
	document.getElementById("submit-mass-graduation").addEventListener("click", submitMassGraduation);
	name = getName();
}