// TODO decodeURIComponent(String)

// Initialiseer de webpagina
const taal = document.querySelector('#taal');
const start = document.querySelector('#start');
const einde = document.querySelector('#einde');
const toevoegKnop = document.querySelector('#toevoegKnop');
const visualisatie = document.querySelector('#visualisatie');

maakElementIn(getOrDefault(einde), visualisatie);
toevoegKnop.addEventListener('click', () => zoek());

/**
 * Zoek een
 * pad met scraper.py en voeg deze toe in de lijst.
 */
function zoek() {

    // Schakel de knop 'toevoegen' uit zolang het zoekproces bezig is, zodat er geen meerdere
    // paden tegelijk toegevoegd kunnen worden.
    toevoegKnop.disabled = true;

    const verzoek = { // Standaardwaarden gebruiken indien het veld leeg is.
        taal: getOrDefault(taal),
        start: getOrDefault(start),
        einde: getOrDefault(einde)
    };

    fetch(`cgi-bin/init.py?data=${JSON.stringify(verzoek)}`)
        .then(antwoord => antwoord.json())
        .then(data => voegToe(data))
        .catch(reason => alert(reason))
        .finally(() => toevoegKnop.disabled = false); // Herstel de knop. Ook als er ondertussen iets mis ging.

}

function voegToe(data) {
    if (data.hasOwnProperty('error')) {
        alert(data.error);
    } else {
        let pad = data.pad;

        // Locatie van invoegen bepalen.
        let moeder = visualisatie;
        let kinderen = visualisatie.getElementsByTagName('li');
        let kindernamen = Array.from(kinderen).map(item => item.getAttribute('item'));
        let i = 0;
        while (moeder === visualisatie && i < pad.length) {
            if (kindernamen.indexOf(pad[i]) !== -1) {
                moeder = kinderen[kindernamen.indexOf(pad[i])];
            }
            i += 1;
        }

        // Alleen nog die elementen toevoegen die nog niet op het pad staan.
        pad = pad.slice(0, i - 1);

        // Nieuw element creëren (zonder toe te voegen aan het DOM).
        for (let item of pad.reverse()) {
            moeder = maakElementIn(item, moeder);
        }
    }
}

function maakElementIn(titel, moeder) {
    let wrap = document.createElement('ul');
    let nieuw = document.createElement('li');
    nieuw.innerHTML = titel;
    nieuw.setAttribute('item', titel);
    wrap.appendChild(nieuw);
    moeder.appendChild(wrap);
    return nieuw;
}

function getOrDefault(element) {
    return element.value === '' ? element.getAttribute('placeholder') : element.value;
}