'use strict';
document.getElementById('kumoa').addEventListener('click', () => {
	kumoa();
	piirräKaikki();
});
document.getElementById('tee-uudelleen').addEventListener('click', () => {
	teeUudelleen();
	piirräKaikki();
});

document.getElementById('lisää-luokka-aste').addEventListener('click', () => {
	suorita(tapahtumaTyypit.lisääAste);
	piirräLuokat();
});

function piirräKaikki() {
	piirräLuokat();
}

function piirräLuokat() {
	let vanhaLuokkaAsteLista = document.getElementById('luokka-asteet');
	let luokkaAsteLista = luoLuokkaAsteLista();
	vanhaLuokkaAsteLista.parentNode.replaceChild(
		luokkaAsteLista,
		vanhaLuokkaAsteLista
	);
}

function luoLuokkaAsteLista() {
	let luokkaAsteLista = document.createElement('ul');
	luokkaAsteLista.id = 'luokka-asteet';

	for (let aste = 0; aste < luokkaAsteet.asteet.length; aste++) {
		if (luokkaAsteet.asteet[aste] !== undefined) {
			let luokkaAsteListassa = luoLuokkaAsteListassa(aste);
			luokkaAsteLista.appendChild(luokkaAsteListassa);
		}
	}

	return luokkaAsteLista;
}

function luoLuokkaAsteListassa(aste) {
	let luokkaAsteListassa = document.createElement('li');
	luokkaAsteListassa.classList.add('luokka-aste');

	luokkaAsteListassa.appendChild(luoPainike('+', () => {
		suorita(tapahtumaTyypit.lisääLuokka, aste);
		piirräLuokat();
	}));
	luokkaAsteListassa.appendChild(luoPainike('-', () => {
		if (luokkaAsteet.asteet[aste].luokat().length > 1) {
			suorita(tapahtumaTyypit.poistaLuokka, aste);
		} else {
			suorita(tapahtumaTyypit.poistaAste, aste);
		}
		piirräLuokat();
	}));

	luokkaAsteListassa.appendChild(luoLuokkaLista(aste));

	let muokkausVirhe = document.createElement('span');
	muokkausVirhe.classList.add('virhe');
	muokkausVirhe.classList.add('piilotettu');
	muokkausVirhe.appendChild(document.createTextNode(''));
	luokkaAsteListassa.appendChild(muokkausVirhe);

	// Luo muokkauspainike ja -lomake, joista vain yksi on näkyvillä kerralla
	let muokkausLomake = document.createElement('form');
	muokkausLomake.classList.add('piilotettu');
	muokkausLomake.classList.add('luokka-aste-lomake');
	let asteValitsin = document.createElement('input');
	asteValitsin.classList.add('luokka-aste-kenttä');
	asteValitsin.type = 'number';
	asteValitsin.min = 1;
	asteValitsin.value = aste;
	muokkausLomake.append(asteValitsin);
	let muokkausLomakePainike = document.createElement('input');
	muokkausLomakePainike.type = 'submit';
	muokkausLomakePainike.value = '✓';
	muokkausLomake.appendChild(muokkausLomakePainike);
	muokkausLomake.addEventListener('submit', (tapahtuma) => {
		tapahtuma.preventDefault();
		let uusiAste = parseInt(asteValitsin.value);
		if (luokkaAsteet.asteet[uusiAste] === undefined || aste === uusiAste) {
			suorita(tapahtumaTyypit.muutaAste, aste, uusiAste);
			piirräLuokat();
		} else {
			muokkausVirhe.firstChild.textContent =
				`Luokka-aste ${uusiAste} on jo olemassa.`;
			muokkausVirhe.classList.remove('piilotettu');
		}
	});
	luokkaAsteListassa.appendChild(muokkausLomake);

	let muokkausPainike = luoPainike('✎', () => {
		muokkausLomake.classList.remove('piilotettu');
		muokkausPainike.classList.add('piilotettu');
	});
	luokkaAsteListassa.appendChild(muokkausPainike);

	return luokkaAsteListassa;
}

function luoLuokkaLista(aste) {
	let luokkaLista = document.createElement('ul');
	luokkaLista.classList.add('luokat');

	for (let luokka of luokkaAsteet.asteet[aste].luokat()) {
		let luokkaListassa = document.createElement('li');
		luokkaListassa.appendChild(document.createTextNode(`${aste}${luokka}`));
		luokkaLista.appendChild(luokkaListassa);
	}

	return luokkaLista;
}

function luoPainike(teksti, funktio) {
	let painike = document.createElement('input');
	painike.type = 'button';
	painike.value = teksti;
	painike.addEventListener('click', funktio);
	return painike;
}

// TOOD: Käyttöliittymätestit