document.addEventListener('DOMContentLoaded', function() {
    wde = new WebDesktopEnvironment
    
}, false);

class WebDesktopEnvironment{
    
    constructor(){
        this.wc = new WindowsCompositor

        //Get basic window ready frame
        fetch("http://192.168.88.10:8080/system/wde/getbasicwindow") //TODO Move to wde func
        .then((response) => response.text())
        .then((html) => {
            WebDesktopEnvironment.SetBasicWindow(html)
            let app = this.loadApp("personal-properties")
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        });
    }

    /**
    * @param {string} appId
    * @returns {Application | undefined}
    */
    loadApp(appId){
        let newApp = document.createElement("application")
        newApp.setAttribute("id", `application-${appId}`)
        let appElem = document.getElementById("WindowsLayer").appendChild(newApp)

        let script = document.createElement("script")
        script.setAttribute("src", "http://192.168.88.10:8080/system/applications/personal-properties/app.js")
        script.setAttribute("async", "false")
        appElem.appendChild(script)
        script.addEventListener("load", function () {
            let newApp = new PersonalProperties(appElem)
            newApp.Init()
        }, false)
    }

    static basicWindow
    /**
    * 
    * @param {string} html
    */
    static SetBasicWindow(html){
        this.basicWindow = html
    }
    /**
    * 
    * @returns {string}
    */
    static GetBasicWindow(){
        // console.log(this.basicWindow)
        return this.basicWindow
    }

    static Alert(alertText){
        console.log(alertText)
    }
}

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

class WindowsCompositor{
    movingElement = null

    constructor(){
        console.log("Windows Compositor is online :)");
        addEventListener("mousedown", (event) => {
            this.catchClick(event)
        })
        addEventListener("mouseup", (event) => {
            this.movingElement = null
        })
        addEventListener("mousemove", (event) => {
            if (this.movingElement != null) {
                this.dragElement(this.movingElement, event.clientX, event.clientY)
            } else {
                
            }
            
        })
    }

    /**
    * @param {MouseEvent} event
    */
    catchClick(event){
        switch (true) {
            case event.target.className == "TestWindowHeader":
                this.movingElement = event.target.parentElement.parentElement.parentElement
                break;
            default:
                break;
        }
    }

    /**
    * @param {HTMLDivElement} element
    * @param {number} posX
    * @param {number} posY
    */
    dragElement(element, posX, posY) {
        element.style.left = posX + "px";
        element.style.top = posY + "px";
    }
}