// ############################################################################
// #                                                                          #
// # Description: JS utile sur la page user infos                             #
// #                                                                          #
// ############################################################################

// Mes sources pour créer cette partie:
// https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
// https://stackoverflow.com/questions/47951287/dynamically-add-li-to-ul-javascript
// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
// https://www.encodedna.com/javascript/how-to-get-all-li-elements-in-ul-using-javascript.htm
// https://www.geeksforgeeks.org/javascript-convert-an-array-to-json/
// https://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse
// https://www.w3docs.com/snippets/javascript/how-to-remove-an-element-from-an-array-in-javascript.html
// On passe par du JSON pour passer la liste des emplois du pro


// ****************************************************************************
// GESTION AJOUT/SUPPRESSION D'UN EMPLOI ET PASSAGE A L'INPUT
// DES VALEURS SELECTIONNEES
// ****************************************************************************
var payload = [];

// Initiation
function init() {
    // Récupération des emplois déja présent
    let jobs = document.getElementsByClassName("jobsListElem");
    // Pour chaque emploi disponible récupération de sa valeur
    for (i = 0; i < jobs.length; i ++) {
        if (jobs[i].getAttribute("data-value") !== "") {
            payload.push(jobs[i].getAttribute("data-value"));
            jobs[i].addEventListener("click", (ptrEvent) => {remove(ptrEvent)});
        }
    }
    // Transformation de la liste des emplois choisis en JSON
    // et inscription de ce dernier dans la "value" de l'input "jobs".
    document.getElementById("jobs").value = JSON.stringify(payload);
}

// Suppression d'un emploi
function remove(ptrEvent) {
    // Suppression de l'emploi dans "payload"
    payload.splice(payload.indexOf(ptrEvent.srcElement.getAttribute("data-value")), 1);
    // Suppression du "div" de l'emploi
    document.getElementById("jobsListGrid").removeChild(ptrEvent.srcElement);
    // Transformation de la liste des emplois choisis en JSON
    // et inscription de ce dernier dans la "value" de l'input "jobs".
    document.getElementById("jobs").value = JSON.stringify(payload);
}

// Ajout d'un emploi
document.getElementById("addButton").addEventListener("click", () => {
    // Récupération du nom et de la valeur du choix dans le "select" des emplois
    let jobName  = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;
    let jobValue = document.getElementById("jobsSel").options[jobsSel.selectedIndex].value;

    // Si l'emploi n'est pas deja dans "payload" et que sa valeur est non nul (choix par défaut)
    if (!payload.includes(jobValue) && jobValue !== "") {
        // Ajout à payload
        payload.push(jobValue);
        // Création, configuration et ajout d'une nouvelle div pour l'emploi choisi
        // Création du "i"
        let i = document.createElement("i");
        i.className = "fas fa-ban";
        // Création, configuration de la div et ajout du "i"
        let div = document.createElement("div");
        div.className = "jobsListElem";
        div.dataset.value = jobValue;
        div.addEventListener("click", (ptrEvent) => {remove(ptrEvent)});
        div.appendChild(document.createTextNode(jobName));
        div.appendChild(i);
        // Enfin, ajout au document
        document.getElementById("jobsListGrid").appendChild(div);
        // Transformation de la liste des emplois choisis en JSON
        // et inscription de ce dernier dans la "value" de l'input "jobs".
        document.getElementById("jobs").value = JSON.stringify(payload);
    }
});

// Déclenchement de l'init
init();