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

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

        fetch("http://localhost:8080/getmockapp" /*, options */)
        .then((response) => response.text())
        .then((html) => {
        document.getElementById("WindowsLayer").innerHTML = html;
        })
        .catch((error) => {
            console.warn(error);
        });

        // var iDiv = document.createElement('div');
        // iDiv.id = 'NewCoolApp';
        // iDiv.className = 'Application';
        // iDiv.style.width = "100px"
        // iDiv.style.height = "100px"
        // document.getElementById('WindowsLayer').appendChild(iDiv)
        // document.getElementById('WindowsLayer')[0].appendChild(iDiv);
    }
}


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 == "WindowDragArea":
                this.movingElement = event.target.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";
    }
}