// ****************************************************************************
// USERINFO
// ****************************************************************************
// 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

// ****************************************************************************
// GLOBAL
// ****************************************************************************
var payload  = [];
var dictJobs = {};

// ****************************************************************************
// FONCTIONS ANNEXES
// ****************************************************************************
// Récupération des possibles emplois et stockage dans une variable
function init_dict_jobs() {
    // Récupération des emplois disponibles
    let selJob = document.getElementById("jobsSel");

    // Pour chaque emploi disponible
    for (i = 0; i < selJob.length; i ++) {
        if (selJob[i].value !== "") {
            // Création d'un dictionnaire -> "Nom Emploi": "ID"
            dictJobs[selJob[i].text] = selJob[i].value;
        }
    }
}

// Création et ajout d'un bouton "supprimmer"
function add_bouton_rm(li, jobsId) {
    // Création et configuration du bouton
    let buttonDel       = document.createElement("button");
    buttonDel.type      = "button";
    buttonDel.innerHTML = "<i class=\"fas fa-ban\"></i>";
    buttonDel.onclick   = () => {remove(li, jobsId);};

    // Ajout du boutton au "li" passé en argument
    li.appendChild(buttonDel);
}

// ****************************************************************************
// FONCTIONS PRINCIPALES
// ****************************************************************************
// Initiation
function init() {
    // Peuplement du dictionnaire des emploies "Nom Emploi": "ID"
    init_dict_jobs();
    
    // Récupération des emplois déja présent
    let jobs = document.getElementById("jobsList").getElementsByTagName("li");

    // Pour chaque emploi déja enregistré
    for (i = 0; i < jobs.length; i ++) {
        // Ajout de chaques choix à la liste final "payload"
        payload.push(dictJobs[jobs[i].innerHTML]);
        // Ajout d'un id et d'un bouton remove à chaque "li".
        jobs[i].id = "jobId_" + dictJobs[jobs[i].innerHTML];
        add_bouton_rm(jobs[i], dictJobs[jobs[i].innerHTML]);
    }

    // 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
function add() {
    // Récupération du nom du choix dans le "select" des emplois
    let jobName = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;

    // Si l'emploi n'est pas deja dans "payload" 
    // et si il fait bien partie du dictionnaire de tous les emplois
    if (jobName in dictJobs && !payload.includes(dictJobs[jobName])) {
        // Ajout à payload
        payload.push(dictJobs[jobName]);
        // Création, configuration et ajout du nouveau "li"
        let li = document.createElement("li");
        li.id  = "jobId_" + dictJobs[jobName];
        li.appendChild(document.createTextNode(jobName));
        add_bouton_rm(li, dictJobs[jobName]);
        document.getElementById("jobsList").appendChild(li);
        // 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(li, jobsId) {
    // Suppression de l'emploi dans "payload"
    payload.splice(payload.indexOf(jobsId), 1);
    // Suppression du "li" de l'emploi
    document.getElementById("jobsList").removeChild(li);
    // 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);
}