class AppMenu extends Shadow {
    selected = ""

    onNewSelection() {
        this.$$("img").forEach((image) => {
            image.style.background = ""
        })
    }

    render() {
        console.log("rendering")
        HStack(() => {
            img("/_/icons/Column.svg", "1.5em", "1.5em")
                .attr({app: "forum"})
                .padding(0.5, em)
                .borderRadius(10, px)
                .onAppear(function () {
                    this.style.border = "1px solid black"
                })
                .onClick((finished, e) => {
                    if(finished) {
                        this.onNewSelection()
                    }
                    e.target.style.background = "var(--accent)"
                    console.log(e.target, e.target.style.background)
                    if(finished) {
                        window.navigateTo("/")
                    }
                })
            img("/_/icons/letter.svg", "1.5em", "1.5em")
                .attr({app: "messages"})
                .padding(0.5, em)
                .borderRadius(10, px)
                .onAppear(function () {
                    this.style.border = "1px solid black"
                })
                .onClick((finished, e) => {
                    if(finished) {
                        this.onNewSelection()
                    }
                    e.target.style.background = "rgb(112 150 114)"
                    if(finished) {
                        window.navigateTo("/messages")
                    }
                })
            img("/_/icons/jobs.svg", "1.5em", "1.5em") 
                .attr({app: "jobs"})
                .padding(0.5, em)
                .borderRadius(10, px)
                .onAppear(function () {
                    this.style.border = "1px solid black"
                })
                .onClick((finished, e) => {
                    if(finished) {
                        this.onNewSelection()
                    }
                    e.target.style.background = "#9392bb"
                    if(finished) {
                        window.navigateTo("/jobs")
                    }
                })
        })
        .borderTop("1px solid black")
        .height("auto")
        .position('fixed')
        .background("var(--main)")
        .zIndex(1)
        .x(0).yBottom(0)
        .justifyContent("space-between")
        .paddingHorizontal(4, em)
        .paddingVertical(1, em)
        .width(100, vw)
        .boxSizing("border-box")
    }
}

register(AppMenu)