function settingsInitModal(){
    let template = document.querySelector('#settings_header');

    modalSetHeader('');
    modalSetBody('');
    modalSetFooter('');

    template = document.querySelector('#settings_header');
    if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) modalSetChildren('modal_header',contenu);
    }
}

modal_hooks['settings'] = function(parametres){
    settingsSetModeInfo();
};

modal_hooks['login'] = function(parametres){
    settingsSetModeLogin();
};


function settingsSetModeInfo()
{
    let template = document.querySelector('#settings_body');

    settingsInitModal();
    if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) modalSetChildren('modal_body',contenu);
    }
    modalSetFooter('');
}

function settingsSetModeLogin()
{
    let intervenant=getContexteValeur('intervenant');
    let profil=getContexteValeur('profil');
    let profils=getContexteValeur('profils');
    let modal_body='';
    let modal_footer='';
    let profil_selector=profil;

    if (profils) {
        let tableau=profils.split(',');
        profil_selector='<select style="width: 100%;font-size: 1em">';
        tableau.forEach(element => {
            let s=(element == profil) ? 'selected' : '';
            profil_selector+='<option '+s+'>'+element+'</option>';
        });
        profil_selector+='</select>';
    }

    settingsInitModal();
    modalSetBody(modal_body);
    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;background: url(\'images/LoginBanner.jpg\');background-size: cover;display: flex;justify-content: center;align-items: center;">';
    modal_body+='  <div style="background-color: rgba(255, 255, 255, 0.4); border-radius: 5px;min-width: 25%;backdrop-filter: blur(3px);display: flex;flex-direction: column;justify-content: center;align-items: center;">';
    if (intervenant=='Anonymous') {
        modal_body+='     <input id="login_username" type="text" placeholder="Username" style="margin: 5px;font-size: 1em;width: 200px"></input>';
        modal_body+='     <input id="login_password" type="password" style="margin: 5px;font-size: 1em;width: 200px"></input>';
        modal_body+='     <button style="border:none;background-color: #2196F3;width: 200px;border-radius: 5px;margin: 5px;color: white; font-size: 1em; font-weight: bold; cursor: pointer" onclick="connectUser()">Log In</button>';
    } else {
        modal_body+='    <h2 style="width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 2px;">'+intervenant+'</h2>';
        modal_body+='    <h3 style="width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 5px;">'+getTrigrammeCollaborateur(intervenant)+'<h3>';
        modal_body+='    <div style=""width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 5px;">'+profil_selector+'</div>';
        modal_body+='    <button style="border:none;background-color: grey;width: 200px;border-radius: 5px;margin: 5px;color: white; font-size: 1em; font-weight: bold; cursor: pointer" onclick="deconnectUser()">Log Out</button>';
    }
    modal_body+='  </div>';
    modal_body+='<div>';

    modalSetBody(modal_body);
}

function connectUser()
{
    let username = document.getElementById('login_username').value;
    let password = document.getElementById('login_password').value;
    // C'est un POC donc on n'a pas de base utilisateur
    if ((username!='')&&(password==username))
    {
        setContexteValeur('intervenant', username);
        setContexteValeur('profils', 'Utilisateur');
        setContexteValeur('profil', 'Utilisateur');
        if (username=='TME')
        {
            setContexteValeur('intervenant', 'Thibaud MEUNIER');
            setContexteValeur('profils', 'Utilisateur,Admin');
            setContexteValeur('profil', 'Utilisateur');
        }
        document.getElementById('username').innerHTML=username;
    }
    settingsSetModeLogin();
}

function deconnectUser()
{
    setContexteValeur('intervenant', 'Anonymous');
    settingsSetModeLogin();
    document.getElementById('username').innerHTML='Log In';
}

function settingsSetModeFilter()
{
    let modal_body='';
    let modal_footer='';

    settingsInitModal();
    modalSetBody(modal_body);
    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">';
    modal_body+='<h2>Mode Filter</h2>';
    modal_body+='<div>';

    modalSetBody(modal_body);
}

function settingsSetModeSetup()
{
    let modal_body='';
    let modal_footer='';

    settingsInitModal();
    modalSetBody(modal_body);
    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;width:100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">';
    modal_body+='  <h2>Thèmes</h2>';
    modal_body+='  <div style="display:flex;">';
    modal_body+='    <div style="flex: 1;border: 1px solid black;text-align: center;cursor: pointer">';
    modal_body+='      <a onclick="settingsSetTheme(\'default\')">Default</a>';
    modal_body+='    </div>';
    modal_body+='    <div style="flex:1;border: 1px solid black;text-align: center;cursor: pointer">';
    modal_body+='      <a onclick="settingsSetTheme(\'red\')" style="color:#FA0000">Red</a>';
    modal_body+='    </div>';
    modal_body+='    <div style="flex:1;border: 1px solid black;text-align: center;cursor: pointer">';
    modal_body+='      <a onclick="settingsSetTheme(\'blue\')" style="color:#0000FA">Blue</a>';
    modal_body+='    </div>';
    modal_body+='  </div>';
    modal_body+='<div>';

    modalSetBody(modal_body);
}

function settingsSetTheme(valeur) 
{
    switch(valeur){
        case 'blue':
            CSSsetClair(245,245,240);
            CSSsetSombre(0,0,245);
        break;
        case 'red':
            CSSsetClair(245,245,240);
            CSSsetSombre(245,0,0);
        break;
        default:
            CSSsetClair(245,245,240);
            CSSsetSombre(0,0,0);
    }
}