class AppMenu extends Shadow {

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

    unselectedIconStyle(el) {
        return el
            .paddingBottom(5, px)
            .borderBottom("")
    }

    selectedIconStyle(el) {
        return el
            .paddingBottom(4, px)
            .borderBottom("1px solid var(--accent)")
    }

    onAppChange() {
        let icons = this.$$("img")
        icons.forEach((icon) => {
            icon.styles(this.unselectedIconStyle)
        })
        let selected = this.$(`img[app="${global.currentApp}"]`)
        selected.styles(this.selectedIconStyle)
    }

    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)
                        .styles(currentApp === app ? this.selectedIconStyle : this.unselectedIconStyle)
                        .onClick(function (done) {
                            if(!done) {
                                this.style.transform = "translateY(10%)"
                            } else {             
                                this.style.transform = ""
                                global.openApp(app)
                            }
                        })
                        .onHover(function (hovering) {
                            if(hovering) {
                                this.style.translateY = -0.1
                            } else {
                                this.style.translateY = ""
                            }
                        })
                        .cursor("pointer")
                }
            })
            .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.onAppChange()
        })
        .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)
    }
}

register(AppMenu, "app-menu")