import "./AppWindow.js"
import "./AppMenu.js"
import "./ProfileButton.js"
import "./InputBox.js"
import "./Sidebar.js"
    
class Home extends Shadow {

    render() {
        ZStack(() => {
            img("/_/icons/logo.svg", "2.5em")
                .position("fixed")
                .left(3, em)
                .top(3, vh)
                .zIndex(3)
                .onClick(() => {
                    window.navigateTo("/")
                })
        
            div()
                .width(100, vw)
                .height(100, vh)
                .margin(0)
                .backgroundImage("/_/images/the_return.webp")
                .backgroundSize("cover")
                .backgroundPosition("48% 65%")
                .backgroundRepeat("no-repeat")

            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")
            .alignVertical("center")

        })
    }
}

register(Home)