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("3em")
                .top("3vh")
                .zIndex(3)
                // .onClick(() => {
                //     window.navigateTo("/")
                //     this.rerender()
                // })
        
            div()
                .width(100, vw)
                .height(100, vh)
                .margin("0px")
                .backgroundImage("url('_/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;
            }

            ProfileButton()
                .zIndex(1)
                .cursor("default")
                .position("fixed")
                .top("5.5vh")
                .right("4.5vw")

            a("/signout", "Sign Out")
                .position("fixed")
                .top("5vh")
                .right("2em")
                .background("transparent")
                .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--periwinkle)")
                .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 () {
                    console.log("navigate")
                    if(window.location.pathname === "/") {
                        this.style.border = "1px solid var(--tan)"
                        this.style.color = "var(--tan)"
                    } else {
                        this.style.border = "1px solid var(--periwinkle)"
                        this.style.color = "var(--accent)"
                    }
                })
        })
    }
}

register(Home)