const overlayEl = document.getElementById("solve-overlay");
const firstBloodEl = document.getElementById("solve-first");
const teamEl = document.getElementById("solve-team");
const challengeEl = document.getElementById("solve-challenge");
const valueEl = document.getElementById("solve-value");
const scoreboardFrameEl = document.getElementById("scoreboard-frame");

const solveQueue = [];
let isShowingOverlay = false;

function pollNextSolve() {
	if (isShowingOverlay) {
		return;
	}

	if (solveQueue.length > 0) {
		const nextSolve = solveQueue.shift();
		showSolve(nextSolve.team, nextSolve.challenge, nextSolve.value, nextSolve.first);
	}
}

function showSolve(team, challenge, value, first) {
	teamEl.textContent = team;
	teamEl.setAttribute("data-text", team);
	challengeEl.textContent = challenge;
	challengeEl.setAttribute("data-text", challenge);
	valueEl.textContent = `+${value}`;
	valueEl.setAttribute("data-text", `+${value}`);

	if (first) {
		firstBloodEl.classList.add("visible");
	}

	overlayEl.classList.add("visible");
	isShowingOverlay = true;

	setTimeout(() => {
		overlayEl.classList.remove("visible");
		firstBloodEl.classList.remove("visible");

		setTimeout(() => {
			isShowingOverlay = false;
			pollNextSolve();
		}, 1000);
	}, first ? 8500 : 4500);
}

let reloadTimeout = null;

function reloadScoreboard(delay = 1000) {
	if (reloadTimeout) {
		clearTimeout(reloadTimeout);
	}

	reloadTimeout = setTimeout(() => {
		scoreboardFrameEl.src = "/scoreboard?ts=" + Date.now();
		reloadTimeout = null;
	}, delay);
}

const es = new EventSource("/presenter/events");

es.onmessage = (e) => {
	const data = JSON.parse(e.data);
	if (data.type === "solve") {
		solveQueue.push(data);
		reloadScoreboard();
		pollNextSolve();
	}
};