window.onload = function () {
    let request = new XMLHttpRequest();
    request.open('GET', 'abandons.php');
    request.send();
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            document.abandons = JSON.parse(request.responseText.trim());

            request = new XMLHttpRequest();
            request.open('GET', 'data.php');
            request.send();
            request.onreadystatechange = function () {
                if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                    afficherData(JSON.parse(request.responseText.trim()));
                }
            }
        }
    }
}

function afficherData(data) {

    // on affiche les classes
    const classes = data.classes;
    const nomAfficheDiv = document.getElementById('nomDeClasse');
    const logosDiv = document.getElementById('logos');

    for (let i = 0; i < classes.length; i++) {
        const bateau = classes[i];
        const img = document.createElement('img');
        img.className = 'logo';
        img.src = 'images/logo_' + bateau.logo.toLocaleLowerCase();
        img.alt = bateau.nom;

        img.addEventListener('pointerover', function () {
            nomAfficheDiv.innerHTML = bateau.nom;

            var voiliers = data.voiliers;
            const voiliersFiltres = voiliers.filter(voilier => voilier.classe === bateau.nom);
            rafraichirTableau(voiliersFiltres);
        })
        logosDiv.appendChild(img);
    }

    // on affiche les voiliers suivant la classe hovered
    rafraichirTableau(data.voiliers)
    console.log(data.voiliers)
}

function rafraichirTableau(voiliers) {
    const tbody = document.getElementById('liste');
    tbody.innerHTML = '';

    for (let i = 0; i < voiliers.length; i++) {
        const voilier = voiliers[i];
        const tr = document.createElement('tr');

        const td_id = document.createElement('td');
        td_id.innerText = i.toString();
        tr.appendChild(td_id);

        const td_nom = document.createElement('td');
        td_nom.innerText = voilier.nom + " " + voilier.année
        tr.appendChild(td_nom);

        const td_skippers = document.createElement('td');
        for (let skipperI = 0; skipperI < voilier.skipper.length; skipperI++) {
            const skipper = voilier.skipper[skipperI];
            td_skippers.innerText += skipper.nom + " et ";
        }
        td_skippers.innerText = td_skippers.innerText.slice(0, -3);
        tr.appendChild(td_skippers);

        const td_abandon = document.createElement('td');
        const is_abandon = document.abandons.includes(voilier.nom)
        console.log("est ce que " + document.abandons + " inclut " + voilier.nom + "? " + is_abandon)
        td_abandon.innerHTML = "<input type='checkbox' " + (is_abandon ? "checked" : "")
            + " onchange='toggleabandon(\"" + voilier.nom + "\")'" +
            ">";
        tr.appendChild(td_abandon);

        tbody.appendChild(tr);
    }
}

function toggleabandon(nomVoilier) {
    document.abandons.includes(nomVoilier) ? document.abandons.splice(document.abandons.indexOf(nomVoilier), 1) : document.abandons.push(nomVoilier);
    console.log(document.abandons);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'abandons.php');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(document.abandons));

}