css(`    
    app-menu img:hover {
        opacity: 0.8;
    }
`)

register(
    
class AppMenu extends Shadow {
    selected;

    constructor(selected) {
        super()
        this.selected = selected
    }

    render() {
        VStack(() => {
            
            function cssVariable(value) {
                return getComputedStyle(document.documentElement)
                .getPropertyValue("--" + value)
                .trim();
            }
            HStack(() => {
                img(cssVariable("house-src"), "1.5em")
                img(cssVariable("people-src"), "1.7em")
            })
            .justifyContent("center")
            .gap(3.5, em)
            .paddingRight(2, em)
        })
        .position("fixed")
        .x(0).yBottom(0)
        .width(100, vw)
        .paddingVertical(1, em)
        .borderTop("0.5px solid var(--accent)")
        .onNavigate(() => {
            if(window.location.pathname === "/") {
                this.styleMaximized()
                $("app-window").close()
            } else {
                this.styleMinimized()
                $("app-window").open(this.selected)
            }
        })
        .onAppear(() => {
            Array.from(this.querySelectorAll("img")).forEach((el) => {
                el.addEventListener("mousedown", (e) => {
                    el.classList.add("touched")
                })
            })
            window.addEventListener("mouseup", (e) => {
                let target = e.target
                if(!target.matches("app-menu img")) {
                    return
                }

                target.classList.remove("touched")

                if(target.classList.contains("selected")) {
                    this.selected = ""
                    window.navigateTo("/")
                } else {
                    this.selected = target.innerText
                    window.navigateTo("/app/" + target.innerText.toLowerCase())
                }
            })
        })

        if(this.selected) {
            this.styleMinimized()
        }
    }

    styleMaximized() {
        $$("app-menu p").forEach((el) => {
            el.classList.remove("selected")
        })
        this.classList.remove("minimized")
        $("#divider").style.display = ""
    }

    styleMinimized() {
        $$("app-menu p").forEach((el) => {
            if(el.innerText !== this.selected) {
                el.classList.remove("selected")
            } else {
                el.classList.add("selected")
            }
        })
        this.classList.add("minimized")
        $("#divider").style.display = "none"
    }
}

, "app-menu")