/**
 * Afficher un décompte.  Tous les `delai` millisecondes, on affiche le
 * décompte comme valeur du champ `#countdown-value`  (innerText).
 */
function countdown(delai) {
	// Principe : on utilise setInterval pour, à intervalle réguler,
	// diminuer le décompte et l'afficher.  setTimeout permet un temps
	// constant (ou presque) entre deux appels mais setInterval devrait
	// contenir la dérive éventuelle.

	function stop() {
	    console.log("stop is called");

	    if (fId !== null) {
		console.log("fId =", fId)
		clearInterval(fId);
		fId = null;
	    } else {
		console.log("Already stopped!");
	    }
	}

	function resume() {
	    console.log("resume is called");

	    if (fId === null && Number(compteurSpan.innerText) > 0) {	// arrêté et décompte non fini
		// démarrer le décompte
		fId = setInterval(eachTick, delai);
	    } else {	// déjà en cours
		console.log("Already running!");
	    }
	}

	function intermediate() {
	    console.log("intermediate is called");

	    const value = "" + compteurSpan.innerText;
	    if (intermediateOl.lastChild && intermediateOl.lastChild.innerText === value) {
		console.log("This value has already been recorded.");
	    } else {
		const li = document.createElement("li");
		li.append(value);
		intermediateOl.appendChild(li);
	    }
	}

	function reset() {
	    console.log("reset is called");

	    // initialiser la valeur du compteur avec la valeur initiale
	    compteurSpan.innerText = "" + compteurForm.initialValue.value;

	    // vider la liste des temps intermédiaires
	    intermediateOl.innerHTML = ''
	}

	function eachTick() {
	    console.log("eachTick is called");
	    const val = compteurSpan.innerText = --compteurSpan.innerText;
	    if (val <= 0) {	// fin du décompte
		stop()		// on arrête donc le compteur
	    }
	}

	function changeDelai() {
	    console.log("changeDelai is called");
	    delai = Number(compteurForm.delaiValue.value)
	    if (fId !== null) {	// le décompte tourne
		// modifier le délai en arrêtant et démarrant
		compteurForm.stop.dispatchEvent(new Event("click"), intermediate);
		compteurForm.resume.dispatchEvent(new Event("click"), changeDelai);
	    }

	}

	let fId = null;
	const compteurSpan = document.getElementById("countdown-value");
	const compteurForm = document.getElementById("countdown-form");
	const intermediateOl = document.getElementById("intermediate-values");
	compteurForm.stop.addEventListener("click", stop);
	compteurForm.resume.addEventListener("click", resume);
	compteurForm.reset.addEventListener("click", reset);
	compteurForm.intermediate.addEventListener("click", intermediate);
	compteurForm.delaiValue.addEventListener("click", changeDelai);

	// Initialiser la valeur et lancer la valeur (sans redondance de code) :
	// on simule les événement 'click' sur les boutons correspondants.
	compteurForm.reset.dispatchEvent(new Event("click"));
	compteurForm.resume.dispatchEvent(new Event("click"));
}

window.addEventListener("load", () => countdown(200));