import "./components/AppWindow.js"
import "./components/AppMenu.js"
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
    
class Home extends Shadow {
    render() {
        ZStack(() => {

            Sidebar()

            switch(window.location.pathname) {
                case "/":
                    AppWindow()
                    AppMenu()
                    break
                case "/app/jobs":
                    AppWindow("Jobs")
                    AppMenu("Jobs")
                    break;
                case "/app/messages":
                    AppWindow("Messages")
                    AppMenu("Messages")
                    break;
                case "/app/market":
                    AppWindow("Market")
                    AppMenu("Market")
                    break;
                case "/app/forum":
                    AppWindow("Forum")
                    AppMenu("Forum")
                    break;
                default:
                    throw new Error("Unknown route!")
            }


            HStack(() => {
                // ProfileButton()
                //     .zIndex(1)
                //     .cursor("default")
    
                a("/signout", "Sign Out")
                    .background("transparent")
                    .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "0.5px solid #bb7c36")
                    .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
                    .borderRadius(5, px)
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"
                        } else {
                            this.style.background = ""
                        }
                    })
                    .onNavigate(function () {
                        if(window.location.pathname === "/") {
                            this.style.border = "1px solid var(--tan)"
                            this.style.color = "var(--tan)"
                        } else {
                            this.style.border = "0.5px solid #bb7c36"
                            this.style.color = "var(--accent)"
                        }
                    })
            })
            .gap(1, em)
            .xRight(2, em).y(2.3, em)
            .position("fixed")
            .verticalAlign("center")
        })
    }
}

register(Home)