var xMousePos = null;
var yMousePos = null;

document.onmousemove = function(e) {
  xMousePos = e.clientX + window.scrollX;
  yMousePos = e.clientY + window.scrollY;

}

document.oncontextmenu = function(e) {

    xMousePos = e.clientX + window.scrollX;
    yMousePos = e.clientY + window.scrollY;
  
}

/**
 * Récupère depuis le document l'identifiant de l'élément
 * @param {string} id Identifiant de l'élément `id='identifiant'`
 * @returns 
 */
function getID(id) {

    return document.getElementById(id)
}

/**
 * 
 * @param {Date} GetDate 
 * @returns 
 */
function getFormattedDate(GetDate) {

    const date = new Date(GetDate)

    var gmonth = date.getMonth() + 1
    var gday = date.getDate()
    var gHour = date.getHours()
    var gMinute = date.getMinutes()
    var gSecondes = date.getSeconds()


    if(date.getMonth() + 1 < 10) {
        gmonth = "0" + (date.getMonth() + 1)
    } 

    if(date.getDate() + 1 <= 10) {
        gday = "0" + date.getDate()
    }

    if(date.getHours() + 1 <= 10) {
        gHour = "0" + date.getHours()
    }

    if(date.getMinutes() + 1 <= 10) {
        gMinute = "0" + date.getMinutes()
    }

    if(date.getSeconds() + 1 <= 10) {
        gSecondes = "0" + date.getSeconds()
    }

    return gday + "/" + gmonth + "/" + date.getFullYear()  + " - " + gHour + ":" + gMinute
}


/**
 * Permet de faire une pop-up automatique
 */
class TextResponse {
    constructor(name) {
        this.name = name
        this.element = getID(this.name)
        this.element.innerHTML = " "
        this.element.style.fontSize = "14px"
        this.element.style.position = "sticky"
        this.element.style.width = this.element.parentElement.offsetWidth + "px"
        this.element.style.textAlign = "center"
    }

    clear() {

        this.element.innerHTML = "&nbsp"
    }
    
    err(text) {
     
        this.element.classList.add("yellow")
        this.element.innerHTML = "<i class='fa fa-warning'></i> " + text

    }

    info(text) {
   
        this.element.classList.remove("yellow")

        this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
    }

    setSize(size) {
            
            this.element.style.fontSize = size
    }

}


const AllViews = new Map()
var zIndex = 5


/**
 * Permet de créer une fenêtre
 * @param {object} properties Propriétés de la fenêtre
 */
class ViewWindow {
    ViewHTML = null
    ViewWindowDiv
    ViewProperties = null
    ViewSpanInteger = null
    ViewPopupSpanInteger = null
    ViewPopupHTML = null
    ViewPopupTitle = null
    ViewItem = new ViewItem(this)
    constructor(properties) {
        if(!AllViews.has(properties.title)) {

            this.ViewProperties = properties
            AllViews.set(properties.title, true)

            
            
            this.ViewHTML = `
                <div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
    
                    <div id='${properties.title}_header' class='view-window-header'>
                    <span style='width: 40px'></span>
                    <p>${properties.title}</p>
                    <div class='view-closediv'>
                    <span id='${properties.title}_reduce' class='btn-cover'><i class="fa-solid fa-window-minimize"></i></span>
                    <span id='${properties.title}_minimize' class='btn-cover'><i class="fa-solid fa-window-maximize"></i></span>
                    <span id='${properties.title}_close' class='view-close'><i class='fa fa-xmark'></i></span>
                    </div>
                    </div>
                    <div id='${properties.title}_content' class='view-window-content'>
                    </div>
                    <div id='${properties.title}_popupDiv'></div>
            
                </div>
            `
            this.ViewSpanInteger = document.createElement("div")
            document.body.appendChild(this.ViewSpanInteger);
            this.ViewSpanInteger.outerHTML = this.ViewHTML

            const header = document.getElementById(properties.title + "_header")
            const windowDiv  = document.getElementById(properties.title + "_window")
            this.ViewWindowDiv = windowDiv
            const closeWindow = document.getElementById(properties.title + "_close")
            const minimizeWindow = document.getElementById(properties.title + "_minimize")
            const reduceWindow = document.getElementById(properties.title + "_reduce")

            closeWindow.addEventListener("click", () => {
    
                this.destroy()
              
            })

            reduceWindow.addEventListener("click", () => {
                windowDiv.style.display = "none"

            })

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

                const windowDiv  = document.getElementById(properties.title + "_window")
                const contentDiv = document.getElementById(properties.title + "_content")
                const minimizeIcon = document.getElementById(properties.title + "_minimize").children[0]
              
            
                if(windowDiv.classList.contains("minimized")) {
                    windowDiv.classList.remove("minimized")
                    contentDiv.style.display = "unset"
                    windowDiv.style.backgroundColor = "#605e58c1"
                    minimizeIcon.classList.remove("fa-window-restore")
                    minimizeIcon.classList.add("fa-window-maximize")
                } else {
                    windowDiv.classList.add("minimized")
                    contentDiv.style.display = "none"
                    windowDiv.style.backgroundColor = "transparent"
                    minimizeIcon.classList.remove("fa-window-maximize")
                    minimizeIcon.classList.add("fa-window-restore")
                    this.destroyPopup()
                }
            })
                
    
            
    
            let isDragging = false;
            let offsetX, offsetY;
            windowDiv.style.zIndex = zIndex + 1

            header.addEventListener('mousedown', (e) => {
                isDragging = true;
                
                zIndex+=2
                windowDiv.style.zIndex = zIndex
               

                // Enregistrez la position de la souris par rapport à la fenêtre
                offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
                offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
              });
            
              // Gérer le déplacement
              document.addEventListener('mousemove', (e) => {
                if (isDragging) {
                    
                  header.style.cursor = "grab"
                  
                  // Calculez la nouvelle position de la fenêtre en fonction de la position de la souris
                  const newLeft = e.clientX - offsetX;
                  const newTop = e.clientY - offsetY;
            
                  // Limitation de la position pour éviter un débordement
                  const maxX = window.innerWidth - windowDiv.offsetWidth;
                  const maxY = window.innerHeight - windowDiv.offsetHeight;
                  
                  windowDiv.style.left = Math.min(Math.max(newLeft, 0), maxX) + 'px';
                  windowDiv.style.top = Math.min(Math.max(newTop, 0), maxY) + 'px';
                }
              });
            
              // Gérer la fin du glisser-déposer
              document.addEventListener('mouseup', () => {
                header.style.cursor = "unset"
                isDragging = false;
              });



        }

        this.ViewItem.show()

    }

    destroy() {
        const win = getID(`${this.ViewProperties.title}_window`)
        win.outerHTML = " "
        AllViews.delete(this.ViewProperties.title)
        this.ViewItem.hide()
    }

    setContent(text) {
        const contentDiv = document.getElementById(this.ViewProperties.title + "_content")
        contentDiv.innerHTML = text
    }

    getViewTitle() {

        return this.ViewProperties.title
    }

    

    createPopup(properties) {

        this.ViewPopupHTML = `<div id="${properties.title}_popup" class='view-popup'>
            <div class='view-popup-bar'>
                <p>${properties.title}</p>
                <span id="${properties.title}_popupClose" class='btn-cover'><i  class='fa fa-xmark'></i></span>
            </div>
            ${properties.content}
        </div>`
       
        const contentDiv = getID(this.ViewProperties.title + "_content")
        const popupDiv = getID(this.ViewProperties.title + "_popupDiv")
        this.ViewPopupSpanInteger = document.createElement("div")
        popupDiv.appendChild(this.ViewPopupSpanInteger);
        this.ViewPopupSpanInteger.outerHTML = this.ViewPopupHTML

        this.ViewPopupTitle = properties.title

        const popup = getID(properties.title + "_popup")
        const popupClose = getID(properties.title + "_popupClose")

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

            this.destroyPopup()

        })

        // Center the popup to the window div

        popup.style.left = (contentDiv.offsetWidth / 2) - (popup.offsetWidth / 2) + "px"
        popup.style.top = (contentDiv.offsetHeight / 2) - (popup.offsetHeight / 2) + "px"
        
        // Render parent element styled blur
        contentDiv.classList.add("blur")

        // Disable all interractions like click and events with contentDiv children

        for(var child of contentDiv.children) {

            child.style.pointerEvents = "none"
        }
       
    }

    destroyPopup() {

        const popup = getID(this.ViewPopupTitle + "_popup")

        if(popup) {
            const contentDiv = getID(this.ViewProperties.title + "_content")
            for(var child of contentDiv.children) {
    
                child.style.pointerEvents = "unset"
            }
            contentDiv.classList.remove("blur")
       
        
            popup.outerHTML = ""

        }
     
    }

}



var AllComponents = new Array()

/**
 * Permet de créer un composant de vue
 * @param {object} properties Propriétés du composant de vue
 */
class ViewComponent {
    name;
    icon;
    permission;
    window;
    constructor (properties) {
        this.name = properties.name
        this.icon = properties.icon
        this.permission = properties.permission
        
        AllComponents.push(this)
    }

    inject(array) {

        array.push(`<div id='${this.name}' class='view'>
        <span class='view-image'><i class='${this.icon}'></i></span>
        <p class='view-text'>${this.name}</p>
        </div>`)

       
    }

    createWindow(functionToExecute) {
            
        this.window = functionToExecute
    }

    bindView() {

        const component = getID(this.name)
        if(component) {
            component.addEventListener("click", () => {
                console.log(component)
                if(this.window) {
                    this.window()
                }
            })
    
        }
        
    }

    forceWindow() {
            
            if(this.window) {
                this.window()
            }
    }


    
}

/**
 * Permet de créer un menu déroulant
 * @param {object} properties Propriétés du menu déroulant
 */


var ActualDroppableMenu = null
class DroppableMenu {
    options = new Array()
    id = null
    DMSpanInteger = null
    #enableHide = false
    constructor() {
 
        this.id = Math.random().toString(36).substring(7)
        this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
        
    }

    add(action, string) {
      
        this.options.push("<div id='" + this.id + "_" + action + "' class='dm-element'>" + string + "</div>")
        
    }

    show() {
            console.log("DROPPABLE MENU - " + this.id)
            if(ActualDroppableMenu) {
                ActualDroppableMenu.hide()
            }
            ActualDroppableMenu = this

            this.options.push(`</div>`)

            if(xMousePos && yMousePos) {
             
                this.DMSpanInteger = document.createElement("span")
          
                document.body.appendChild(this.DMSpanInteger);
                this.DMSpanInteger.outerHTML = this.options.join('')

                const menu = getID(`dm-${this.id}`)

                menu.style.zIndex = zIndex + 2
                zIndex+=1

                menu.style.left = (xMousePos - 40) + "px" 
                menu.style.top = (yMousePos - 40) + "px"
              
            }
            
            this.#enableHide = false

            document.addEventListener("click", () => {
  
                this.hide()
              
            })
           
          
         
    }

    get(action) {

        return getID(this.id + "_" + action)
    }

    hide() {
       
        const menu = getID(`dm-${this.id}`)
        if(menu) {
            menu.outerHTML = ""
        }

    }
}

/**
 * Permet de créer un composant de type "Serveur"
 */
class Server {
    constructor(properties) {
        this.name = properties.name
        this.description = properties.description
        this.icon = properties.icon
    }

    generateHTML() {
        return `
        <div class="servers-box">
            <div class="servers-box-title">
                <div class='servers-box-title-info'>
                    <i class='${this.icon}'></i>
                    <p>${this.name}</p>
                   
                </div>
                <p style='font-size: 12px;'>${this.description}</p>
            </div>
            <div class="servers-box-content">
                <div class='servers-metrics'>
                      <div class='servers-metrics-box'>
                            <div>
                            <i class='fa-solid fa-memory'></i>
                            <p>RAM</p>
                            </div>
                            <p id='${this.name}_ram'>-- Mo / -- Mo</p>
                      </div>
                      <div class='servers-metrics-box'>
                            <div>
                            <i class='fa-solid fa-microchip'></i>   
                            <p>CPU</p>
                            </div>
                            <p id='${this.name}_cpu'>---%</p>
                      </div>
                      <div class='servers-metrics-box'>
                            <div>
                            <i class='fa-solid fa-hdd'></i>
                            <p>DISK</p>
                            </div>
                            <p id='${this.name}_disk'>-- Go / -- Go</p>
                      </div>
                 </div>
            </div>
        </div>
        
        `
    }


    loadScript() {
            
        const ramSpan = getID(`${this.name}_ram`)
        const cpuSpan = getID(`${this.name}_cpu`)
        const diskSpan = getID(`${this.name}_disk`)
            
       
        setInterval(() => {  

            if(getID(`${this.name}_ram`)) {
           
                const request = post(`SERVER_GET_METRICS_` + this.name, this.name ) 
                console.log(this.name)
                
              
                request.then((answer) => {
                    console.log(answer)
                    console.log(this.name)
                    //Transform all metrics in mb to answer.metrics to Go or %
                    answer.metrics.usedram = Math.round(answer.metrics.usedram)
                    answer.metrics.totalram = Math.round(answer.metrics.totalram)

                    //Transform all metrics in blocks to Go
                    answer.metrics.usedisk = Math.round((answer.metrics.usedisk * 3.814697265625) / 1000000) 
                    answer.metrics.totaldisk = Math.round((answer.metrics.totaldisk * 3.814697265625) / 1000000) 

                    if(answer.metrics.name == this.name) {
                        ramSpan.innerHTML = `${answer.metrics.usedram} Mo / ${answer.metrics.totalram} Mo`
                        cpuSpan.innerHTML = answer.metrics.cpu + "%"
                        diskSpan.innerHTML = `${answer.metrics.usedisk} Go / ${answer.metrics.totaldisk} Go`
          
                    }
                                
                }) 
            } 
    

  
        }, 1000)
            

    }
}

/**
 * Créer un composant de vue de type "Service"
 * @param {object} properties Propriétés du composant de vue
 */
class Service {
    name = null
    description = null
    icon = null
    url = null
    canAccess = false
    isOnline  = false
    constructor(properties) {
        this.name = properties.name
        this.description = properties.description
        this.icon = properties.icon
        this.url = properties.url
        this.canAccess = properties.canAccess
    }

    generateHTML() {
        return `
        <div class="sv">
            <div class='sv-info'>
                <img class="sv-icon" src="${this.icon}" alt="${this.name}">
                <div>
                    <h1>${this.name}</h1>
                    <p>${this.description}</p>
                    <p>Etat : <span id='${this.name}_status' class="sv-status">Vérification en cours ...</span></p>
                </div>
            </div>
            
            <div class="sv-actions">
                ${this.canAccess ? `<a href="${this.url}" target="_blank"><button class="btn green"><span>Accéder au service</span></button></a>` : ""}
                <button id='${this.name}_svpower' class='btn yellow'n><span>Options d'alimentation<span></button>
            </div>
        </div>
        `

        
    }

    loadScript() {

        return new Promise((resolve, reject) => {
            const statusSpan = getID(`${this.name}_status`)
            const request = post(`SV_GET_SERVICE_STATUS`, this.url) 
        

            request.then((answer) => {
                if(answer.name == this.url) {
                    if(answer.answer == "ONLINE") {
                        statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                        this.isOnline  = true
                    } else {
                        statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
              
                    }
                    resolve("LOADED")
                }
            
            })

            const powerButton = getID(`${this.name}_svpower`)

            // Make a popup of View to select if you want to start, stop or restart the service by doing a request

            powerButton.addEventListener("click", () => {
                View.createPopup({
                    title: `<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`,
                    content: `
                    
                    <p class='sv-power-select'>${this.name}</p>
                    <p id='sv-power-info'></p>
                    <div class="sv-power">
                        <button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
                        <button id="${this.name}_restart" class="btn yellow"><span>Redémarrer</span></button>
                        <button id="${this.name}_stop" class="btn red"><span> Arrêter</span></button>
                    </div>
                    `
                })

                const startButton = getID(`${this.name}_start`)
                const stopButton = getID(`${this.name}_stop`)
                const restartButton = getID(`${this.name}_restart`)
                const info = new InfoPop("sv-power-info")
                
                

                if(this.isOnline) {
                    startButton.style.display = "none"
                    info.info("Verifiez que le service n'est pas utilisé par quelqu'un d'autre avant de le redémarrer ou de l'arrêter")
                } else {
                    stopButton.style.display = "none"
                    restartButton.style.display = "none"
                    info.info("Si le service ne démarre pas, vérifiez l'intégrité du service")
                }

                startButton.addEventListener("click", () => {
                    const request = post(`SV_START_SERVICE`, this.url) 
                    

                    request.then((answer) => {
                        if(answer.answer == "OK") {
                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                            this.isOnline  = true
                        } else {
                            info.err("Impossible de démarrer le service")

                        }
                    })

                })

                stopButton.addEventListener("click", () => {
                    const request = post(`SV_STOP_SERVICE`, this.url) 

                    request.then((answer) => {
                        if(answer.answer == "OK") {
                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
                            this.isOnline  = false
                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                          
                        } else {
                            info.err("Impossible d'arrêter le service")

                        }
                    
                    })
                })

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

                    console.log("RESTART")

                    const request = post(`SV_RESTART_SERVICE`, this.url) 

                    request.then((answer) => {
                        if(answer.answer == "OK") {
                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                            this.isOnline  = true
                        } else {
                            info.err("Impossible de redémarrer le service")

                        }
                        
                    })
                })


        })
        
     })
    }
    
}


/**
 * Permet de créer un item de la barre des tâches
 * @param {ViewWindow} window ViewWindow associé à l'item
 */
class ViewItem {
    /**
     * 
     * @param {ViewWindow} window 
     */
    constructor(window) {
        this.window = window
    }

    show() {
        const viewItems = getID("views-items")

        const item = document.createElement("div")
        item.id = `${this.window.ViewProperties.title}_item`
        item.classList.add("view-item")
        item.innerHTML = this.window.ViewProperties.title

        viewItems.appendChild(item)

        item.addEventListener("click", () => {  
            zIndex+=1
            this.window.ViewWindowDiv.style.zIndex = zIndex + 1
            this.window.ViewWindowDiv.style.display = "unset"
        })

        item.addEventListener("contextmenu", () => {
            const dp = new DroppableMenu()

            dp.add("index", `<i class='fa fa-window-restore'></i> Afficher`)
            dp.add("close", `<span class='menu-signout'><i class='fa fa-xmark'></i> Fermer</span>`)
            dp.show()

            const index = dp.get("index")
            const close = dp.get("close")

            index.addEventListener("click", () => {
                zIndex+=1
                this.window.ViewWindowDiv.style.display = "unset"
                this.window.ViewWindowDiv.style.zIndex = zIndex + 1
                dp.hide()
            })

            close.addEventListener("click", () => {
                this.window.destroy()
                dp.hide()
            })

        })

    }
    
    hide() {
        const viewItems = getID("views-items")
        const item = getID(`${this.window.ViewProperties.title}_item`)

        item.outerHTML = ""
    }
   
}