class NavBar extends Shadow {
    NavButton(text) {

        function normalizeText(text) {
            return text.toLowerCase().replace(/[\s?]+/g, "");
        }

        function isSelected(el) {
            return ("/" + normalizeText(el.innerText)) === window.location.pathname
        }

        return p(text)
                .cursor("default")
                .textUnderlineOffset(0.5, em)
                .onAppear(function() {
                    this.style.textDecoration = isSelected(this) ? "underline" : ""
                })
                .onHover(function (hovering) {
                    if(hovering) {
                        this.style.textDecoration = "underline"
                    } else if(!isSelected(this)) {
                        this.style.textDecoration = ""
                    }
                })
                .onClick(function (done) {
                    if(done) {
                        if(!isSelected(this)) {
                            window.navigateTo(normalizeText(this.innerText))
                        } else {
                            window.navigateTo("/")
                        }
                    }
                })
        
    }

    render() {
        HStack(() => {
            this.NavButton("WHY?")
            this.NavButton("EVENTS")
            div().width(2.5, em).height(2.5, em)
            this.NavButton("JOIN")
            this.NavButton("SIGN IN")
        })
        .x(50, vw).y(4, em)
        .center()
        .fontSize(0.85, em)
        .justifyContent("center")
        .gap(3, em)
        .paddingRight(2, em)
        .width(50, vw)
    }
}

register(NavBar)