document.addEventListener("contextmenu", (e) => {

    e.preventDefault()
})

function generateFileExplorer() {

    const View = new ViewWindow({
        title: `<i class="fa fa-folder"></i> Gestionnaire de fichiers`,
        width: "1000px",
        height: "600px"
    })

    goHomePath()
    function goHomePath() {
        const rFiles = post("FX_GET", "homepath")

        rFiles.then((result) => {
            loadFiles(result)
        })
    }

   

    View.setContent(`
        <div class="fx-window">
            <div class='fx-bar'>
                <span id='fx-home' class='btn-cover'><i class='fa fa-home'></i></span>
                <input class='fx-root-input' type="text" id='${View.getViewTitle()}_rootInput'>
                <div class='fx-bar-actions'>
                <button class='btn blue'><span><i class='fa fa-folder'></i> Nouv. dossier</span></button>
                <button class='btn blue'><span><i class="fa-solid fa-file-arrow-up"></i> Upload</span></button>
                </div> 
            </div>
            <div id='${View.getViewTitle()}_explorer' class='fx-explorer'>
            </div>
        </div>
        
    `)

    const rootInput = getID(View.getViewTitle() + '_rootInput')
    const explorer = getID(View.getViewTitle() + '_explorer')

    rootInput.addEventListener("change", () => {

       const reqFiles = post("FX_GET", rootInput.value)
       reqFiles.then((result) => {
            loadFiles(result)

       }) 
     })

    function loadFiles(files) {

        rootInput.value = files.root
        var fileElements = new Array()

        if(files.content == "NOT_PERMITTED") {
            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
            fileElements.push("<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Vous n'avez pas les permissions pour accéder à ce dossier.</p>")

        } else if(files.content == "NOT_EXIST") {
            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
            explorer.innerHTML = "<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Ce dossier n'existe pas.</p>"
        } else {
            
            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
            for(const file of files.content) {

                // Convert all file.size to a human readable format with units

                file.size = bytesToSize(file.size)

                //Tell if the file is a directory or not

                if(file.directory) {
                    file.size = "Dossier"
                }

                fileElements.push(`<div id='${file.id}' oncontextmenu='createFileMenu("${file.id}")' class='fx-element'>
                <div>
                    ${getIcon(file)}
                    <p>${file.name}</p>
                </div>
                <p>Taille : ${file.size}</p>
                <p>Date de modification : ${getFormattedDate(file.lastedition)}</p>
                </div>`)
            }


        }


        explorer.innerHTML = fileElements.join("")

        const parent = document.getElementById("fx-parent")
        const home = document.getElementById("fx-home")

        home.addEventListener("click", () => {
            
            goHomePath()

        })

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

                const reqFiles = post("FX_GET", files.parent)
                reqFiles.then((result) => {
                    loadFiles(result)
                })

        })

        if(files.content != "NOT_PERMITTED" && files.content != "NOT_EXIST") {

            // If it's a directory, get the file directory and make the request to get the files in it and loadIt

            for(const file of files.content) {
                    
                if(file.directory) {

                    const element = document.getElementById(file.id)
                    element.addEventListener("click", () => {

                        const reqFiles = post("FX_GET", file.fileDirectory)
                        reqFiles.then((result) => {
                            loadFiles(result)
                        }) 
                    })
                }

        }


        }
       
    }

    

}

function createFileMenu(idCreated) {

    const dropMenu = new DroppableMenu({
        "id": idCreated
    })

    dropMenu.add("rename", "<i class='fa-solid fa-file-signature'></i> Renommer")
    dropMenu.add("share", "<i class='fa fa-share'></i> Partager")
    dropMenu.add("delete", "<i class='fa fa-trash'></i> Supprimer")


    dropMenu.show()
}

function getIcon(file) {
    if(file.type == "application/json") {

        return '<i style="color:rgb(179, 141, 4);" class="fa-sharp fa-code"></i>'
    }
    if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {

        return '<i style="color:rgb(47, 94, 247);" class="fa-solid fa-file-word"></i>'
    }
    if(file.type == "application/vnd.ms-powerpoint") {

        return '<i style="color:rgb(255, 112, 51);" class="fa-solid fa-file-powerpoint"></i>'
    }
    if(file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | file.type == "application/vnd.ms-excel") {

        return '<i style="color:rgb(51, 255, 61);" class="fa-solid fa-file-excel"></i>'
    }

    if(file.type == "application/java-archive") {

        return '<i style="color:rgb(255, 202, 150);" class="fa-brands fa-java"></i>'
    }

    if(file.type == "application/x-sh") {

        return '<i style="color:rgb(171, 226, 255);" class="fa-solid fa-file-code"></i>'
    }

    if(file.type == "application/x-msdos-program" | file.type == "application/x-msdownload") {

        return'<i style="color:rgb(53, 191, 255);" class="fa-brands fa-windows"></i>'
    }
    if(file.type == "application/javascript") {

        return '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js">'
    }
    if(file.type == "image/png" | file.type == "image/jpeg") {

        return '<i style="color:rgb(189, 104, 189);" class="fa-solid fa-file-image"></i>'
    }
    if(file.type == "text/html") {

        return '<i style="color:tomato;" class="fa-brands fa-html5"></i>'
    }
    if(file.type == "text/css") {

        return '<i style="color:rgb(66, 135, 245);" class="fa-brands fa-css3-alt"></i>'
    }
    if(file.type == "application/zip") {

        return '<i style="color:rgb(255, 139, 38);" class="fa-solid fa-file-zipper"></i>'
    }
    if(file.type == "audio/mpeg") {

        return '<i style="color:rgb(38, 222, 255);" class="fa-solid fa-file-audio"></i>'
    }
    if(file.type == "application/pdf") {

        return '<i style="color:rgb(255, 71, 51);" class="fa-solid fa-file-pdf"></i>'
    } 
    if(file.directory) {

        return '<i style="color:yellow;" class="fa fa-folder"></i>'
    } else {

        return '<i class="fa fa-file"></i>'
    }

}

function bytesToSize(bytes) {
    var sizes = ['o', 'Ko', 'Mo', 'Go', 'To'];
    if (bytes == 0) return '0 o';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}