import "../components/NavBar.js"
import "../components/SignupForm.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
import "./Success.js"

class Home extends Shadow {
    render() {

        ZStack(() => {

            NavBar()

            img("/_/icons/logo.svg", "2.5em")
                .onClick((done) => {
                    if(!done) return
                    window.navigateTo("/")
                })
                .position("absolute")
                .left(50, vw).top(4, em)
                .center()
                .transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
    
            switch(window.location.pathname) {
                case "/":
                    img("/_/images/knight.png", "29vmax")
                        .position("absolute")
                        .left(50, vw).top(isMobile() ? 50 : 53, vh)
                        .center()
            
                    p("H   Y   P   E   R   I   A  ")
                        .x(50, vw).y(isMobile() ? 50 : 53, vh)
                        .textAlign("center")
                        .center()
                        .color("var(--gold)")
                        .fontSize(isMobile() ? 6 : 5, vw)
                        .maxWidth(isMobile() ? 0.8 : 100, em)
            
                    if(!isMobile()) {
                        let text = "A Classical Christian Network"
                        p(isMobile() ? text : text.toUpperCase())
                            .x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
                            .center()
                            .letterSpacing(0.3, em)
                            .width(isMobile() ? 80 : 100, vw)
                            .fontSize(isMobile() ? 0.8 : 1, em)
                            .textAlign("center")
                    }
                    break;
                case "/why":
                    Why()
                    break;
                case "/events":
                    Events()
                    break;
                case "/join":
                    Join()
                    break;
                case "/success":
                    Success()
                    break;

                default:
                    if(window.location.pathname.startsWith("/signup")) {
                        SignupForm()
                    } else if(window.location.pathname.startsWith("/signin")) {
                        SignIn()
                    }
            }

        })
        .onNavigate(() => {
            this.rerender()
        })
            
    }
}

register(Home)