import "../apps/Dashboard/Dashboard.js"
import "../apps/Forum/Forum.js"
import "../apps/Tasks/Tasks.js"
import "../apps/Messages/Messages.js"
import "../apps/Market/Market.js"
import "../apps/Jobs/Jobs.js"
import "../apps/People/People.js"
import "../apps/Settings/Settings.js"

class AppWindow extends Shadow {

    calculateWidth() {
        let sidebar = $("sidebar-").getBoundingClientRect()
        let w = sidebar.width
        return w
    }

    calculateHeight() {
        let appmenu = $("app-menu").getBoundingClientRect()
        let h = appmenu.height
        return h
    }

    render() {
        ZStack(() => {
            switch(global.currentApp) {
                case "Dashboard":
                    Dashboard()
                    break;
                case "People":
                    People()
                    break;
                case "Settings":
                    Settings()
                    break;
            }
        })
        .overflow("scroll")
        .position("absolute")
        .width(window.innerWidth - this.calculateWidth() + 10, px)
        .height(window.innerHeight - this.calculateHeight() + 10, px)
        .borderRadius(15, px)
        .boxShadow("rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px")
        .background("var(--window)")
        .x(this.calculateWidth(), px)
        .yBottom(this.calculateHeight(), px)
        .onEvent("resize", () => {
            this.rerender()
        })
        .onEvent("appchange", () => {
            this.rerender()
        })
        .onEvent("networkchange", () => {
            this.rerender()
        })
    }
}

register(AppWindow, "app-window")