users.createWindow(async () => {
    const usersComponent = users

    const View = new ViewWindow({
        title: `<i class="fa fa-users"></i> Gestion des utilisateurs`,
        width: "500px",
        height: "700px"
    })

    loadUsers()

    function loadUsers() {

        View.setContent(`
        <div class="users">
        <div class='us-bar'>
            <p> <strong>Utilisateurs</strong> : <span id='${View.getViewTitle()}_number'><i>Calcul en cours</i></span></p>
            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un utilisateur</span></button>
        </div>
        <div class='us-users' id='${View.getViewTitle()}_users'>
            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
            </div>
        </div>
        </div>`)
    
    
        const usersList = new Array()
        const users = get("US_ALL")

        const usersDiv = document.getElementById(`${View.getViewTitle()}_users`)
        const usersNumber = document.getElementById(`${View.getViewTitle()}_number`)
        const addButton = document.getElementById(`${View.getViewTitle()}_add`)

        addButton.addEventListener("click", () => {
            View.createPopup({
                title: "Ajouter un utilisateur",
                content: `
                <div class='us-add'>
                    <p>Nom d'utilisateur</p>
                    <input class='field' type="text" id="us-add-username" placeholder="Nom d'utilisateur">
                    <p>Nom d'affichage</p>
                    <input class='field' type="text" id="us-add-displayname" placeholder="Nom d'affichage">
                    <p>Mot de passe</p>
                    <input class='field' type="password" id="us-add-password" placeholder="Mot de passe">
                    <p>Permissions</p>
                    <div class='permissions'>
                        <div>
                            <input type="checkbox" id="perm_FILES_EXPLORER">
                            <label for="perm_FILES_EXPLORER">Fichiers</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_SERVICES">
                            <label for="perm_SERVICES">Services</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_LINKS">
                            <label for="perm_LINKS">Liens</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_SERVERS">
                            <label for="perm_SERVERS">Serveurs</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_PIPELINES">
                            <label for="perm_PIPELINES">Pipelines</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_METRICS">
                            <label for="perm_METRICS">Metrics</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_USERS">
                            <label for="perm_USERS">Utilisateurs</label>
                        </div>
                        <div>
                            <input type="checkbox" id="perm_SETTINGS">
                            <label for="perm_SETTINGS">Paramètres</label>
                        </div>
                    </div>
               
                <p>Photo de profil</p>
                
                <input type="file" id="us-add-picture" accept="image/png, image/jpeg">
                <span id='user-addreturn-info'></span>
                <button id='us-add-button' class='btn green'><span>Ajouter</span></button>
                </div>
                `
            })


            const addCButton = document.getElementById("us-add-button")
            const username = document.getElementById("us-add-username")
            const displayname = document.getElementById("us-add-displayname")
            const password = document.getElementById("us-add-password")
            const picture = document.getElementById("us-add-picture")
            const permissions = document.getElementsByClassName("permissions")[0].children
            const returnInfo = new TextResponse("user-addreturn-info")
    

            addCButton.addEventListener("click", () => {
                var permissionsList = new Array()
                for(var permission of permissions) {
                    console.log(permission.children[0].checked)
                    if(permission.children[0].checked) {
                        permissionsList.push(permission.children[0].id.replace("perm_", ""))
                    }
                }

    
                post("US_ADD", {
                    username: username.value,
                    display_name: displayname.value,
                    password: password.value,
                    picture: picture.files[0],
                    permissions: permissionsList
                }).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.destroyPopup()
                        loadUsers()
                    }
                  
                })

            })
        
        })

        users.then(users => {
            users = new Map(JSON.parse(users))
            for(var user of users) {
             
                user = user[1]
                console.log(user)
                const userComponent = new User({
                    username: user.username,
                    display_name: user.display_name,
                    picture: user.picture,
                    permission: user.permission,
                    window: View,
                    component: usersComponent
                })
                usersList.push(userComponent)
            }

          
            usersNumber.innerHTML = usersList.length

           
            
            const usersContent = new Array()

            for(var user of usersList) {
                usersContent.push(user.generateHTML())
              
            }

            usersDiv.innerHTML = usersContent.join("")
    
           for(var user of usersList) {
                user.loadScript()
           }
        })
    }
   
    
})