const menulogo = getID("menu-logo")
const usersettingsBtn = getID("user-settings-button")

menu.style.display = "none"

menulogo.addEventListener("click", () => {

    const menu = getID("menu")

    if(menu.style.display == "block") {
        menu.style.display = "none"
    } else {
        menu.style.display = "block"
    }

})

usersettingsBtn.addEventListener("click", () => {
    const View = new ViewWindow({
        title: `<i class="fa fa-user"></i> Mon Compte`,
        width: "600px",
        height: "650px"
    })

    View.setContent(`
    <div class="user-settings">
    <p>Mes informations</p>
    <div class="us-settings">
     
            <img class='us-settings-image' id="us-settings-image" src="">
        
        <div class="us-settings-info">
            <p>Nom d'utilisateur</p>
            <input class="field" type="text" id="us-settings-username" placeholder="Nom d'utilisateur">
            <p>Nom d'affichage</p>
            <input class="field" type="text" id="us-settings-displayname" placeholder="Nom d'affichage">
            <p>Mot de passe</p>
            <input class="field" type="password" id="us-settings-password" placeholder="Mot de passe">
            <p>Photo de profil</p>
            <input type="file" id="us-settings-picture" accept="image/png, image/jpeg">
     
          
          
        </div>
        <br>
        <span id='us-settings-return-info'></span>
        <button id="us-settings-save" class="btn green"><span> Sauvegarder</span></button>
    </div>
    <p>Mes permissions</p>
    <div id="us-settings-permissions">
    </div>

    </div>
    `)

    const usSettingsImage = getID("us-settings-image")
    const usSettingsUsername = getID("us-settings-username")
    const usSettingsDisplayname = getID("us-settings-displayname")
    const usSettingsPassword = getID("us-settings-password")
    const usSettingsPermissions = getID("us-settings-permissions")
    const usSettingsSave = getID("us-settings-save")
    const usSettingsPicture = getID("us-settings-picture")
    const returnInfo = new TextResponse("us-settings-return-info")  

    const REQ_user = get("USERINFO")

    var actualUsername = ""

    REQ_user.then((ANS_user) => {
        usSettingsImage.src = ANS_user.picture
        usSettingsUsername.value = ANS_user.username
        usSettingsDisplayname.value = ANS_user.display_name
        actualUsername = ANS_user.username

        const permissions = ANS_user.permission
        const permValid = new Array()
    
        permissions.forEach((permValue) => {

            permValid.push("<p>" + permValue + "</p>")
            
        })

        usSettingsPermissions.innerHTML = permValid.join("")
    })

    usSettingsSave.addEventListener("click", () => {
        const request = post(`US_EDIT_PERSONNAL`, {username: actualUsername, newusername: usSettingsUsername.value, display_name: usSettingsDisplayname.value, password: usSettingsPassword.value, picture: usSettingsPicture.files[0]}) 
                request.then((answer) => {
                    if(answer == "ALREADY_EXIST") {

                        returnInfo.err("L'utilisateur existe déjà !")

                    } else if(answer == "USERNAME_MISSING") {

                        returnInfo.err("Le nom d'utilisateur est manquant !")
                    } else if(answer == "DISPLAY_NAME_MISSING") {

                        returnInfo.err("Le nom d'affichage est manquant !")
                    } else if(answer == "PASSWORD_MISSING") {
                            
                        returnInfo.err("Le mot de passe est manquant !")
                    } else {

                        View.destroy()
                        loadUserInfo()
                    }
                })
    })


})

document.addEventListener("click", (e) => {
    if(e.target != menulogo) {
        menu.style.display = "none"
    }
})