class AppMenu extends Shadow {

    images = {
        "Dashboard": {src: "house-src", size: "1.5em"},
        "People": {src: "people-src", size: "1.7em"}
    }

    render() {
        VStack(() => {
            
            function cssVariable(value) {
                return getComputedStyle(document.documentElement)
                .getPropertyValue("--" + value)
                .trim();
            }

            HStack(() => {
                let currentNetwork = global.currentNetwork
                if(!currentNetwork) return
                let currentApp = global.currentApp

                for(let i = 0; i < currentNetwork.apps.length; i++) {
                    let app = currentNetwork.apps[i]
                    img(cssVariable(this.images[app].src), this.images[app].size)
                        .attr({app: app})
                        .padding(0.3, em)
                        .paddingBottom(currentApp === app ? 4 : 5, px)
                        .borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
                        .onClick((done) => {
                            if(done) global.openApp(app)
                        })
                        .onHover(function (hovering) {
                            if(hovering) {
                                this.style.opacity = 0.8
                            } else {
                                this.style.opacity = ""
                            }
                        })
                }
            })
            .justifyContent("center")
            .gap(3.5, em)
            .paddingRight(2, em)
        })
        .onEvent("themechange", () => {
            this.rerender()
        })
        .onEvent("appchange", () => {
            // console.log("app hello?") // BUG: Quill is not acknowledging this event unless there is something else in the function body
            this.rerender()
        })
        .onEvent("networkchange", () => {
            // console.log(global.currentApp)
            this.rerender()
        })
        .position("fixed")
        .x(0).yBottom(0)
        .width(100, vw)
        .height(2.5, em)
        .paddingVertical(0.7, em)
        .borderTop("1px solid var(--accent)")
    }
}

register(AppMenu, "app-menu")