import "./SignUp.js"
import "./SignIn.js"
import "./SignupForm.js"
import "./Success.js"

class Home extends Shadow {

    MainContent() {
        return VStack(() => {
            HStack(() => {
                img("/_/icons/quill.svg", "6vmax")

                p("PARCHMENT")
                    .fontFamily("Nabla")
                    .fontSize(6, vmax)
                    .marginLeft(1, rem)
                    .color("var(--accent)")
            })
            .marginBottom(1, rem)

            HStack(() => {

                VStack(() => {
                    HStack(() => {
                        span("The Community App")
                            .fontFamily("Canterbury")
                            .color("var(--accent)")
                            .fontSize(2.2, vmax)
                            .paddingBottom(1, rem)
                    })
                    .height(5, em)
                    .verticalAlign("center")
                    .horizontalAlign("center")

                    p("Parchment is a platform for small to medium-sized communities.")
                        .color("var(--quillred)")
                        .borderTop("1px solid var(--quillred)")
                        .verticalAlign("center")
                        .borderHorizontal("1px solid var(--quillred)")
                        .height(5, em)
                        .fontSize(window.isMobile() ? 2 : 1.2, vmax)
                        .paddingTop(2, vmax)
                        .paddingBottom(window.isMobile() ? 1 : 0, em)
                        .paddingHorizontal(2, vmax)
                })

                VStack(() => {

                    HStack(() => {
                        p("Log In")
                            .color("var(--quillred)")
                            .paddingVertical(1.2, rem)
                            .paddingHorizontal(3, vmax)
                            .fontSize(1.2, em)
                            .cursor("default")
                            .onHover(function (hovering) {
                                if(hovering) {
                                    this.style.background = "var(--quillred)"
                                    this.style.color = "black"
                                } else {
                                    this.style.background = ""
                                    this.style.color = "var(--quillred)"
                                }
                            })
                            .onClick(() => {
                                window.navigateTo("/login")
                            })
                        p("Sign Up")
                            .color("var(--quillred)")
                            .borderLeft("1px solid var(--quillred)")
                            .paddingVertical(1.2, rem)
                            .paddingHorizontal(3, vmax)
                            .fontSize(1.2, em)
                            .cursor("default")
                            .onHover(function (hovering) {
                                if(hovering) {
                                    this.style.background = "var(--quillred)"
                                    this.style.color = "black"
                                } else {
                                    this.style.background = ""
                                    this.style.color = "var(--quillred)"
                                }
                            })
                            .onClick(() => {
                                window.navigateTo("/signup")
                            })
                    })
                    .height(5, em)
                    .border("1px solid var(--quillred)")

                    div()
                    .height(5, em)
                })

            })
            
            ZStack(() => {
                img("/_/images/nodes.svg", window.isMobile() ? "30vmax" : "20vmax")
                .marginHorizontal(50, pct)
                .marginTop(13, em)
                .center()
            })
            .width(100, pct)
            .marginBottom(10, em)
            .border("1px solid var(--quillred)")
        })
        .marginHorizontal(window.isMobile() ? 6 : 27, vw)
        .width(window.isMobile() ? 88 : 46, vw)
        .marginTop(10, vh)
    }

    render() {

        ZStack(() => {
    
            switch(window.location.pathname) {
                case "/":
                    this.MainContent()
                    break;
                case "/signup":
                    SignUp()
                    break;
                case "/success":
                    Success()
                    break;

                default:
                    if(window.location.pathname.startsWith("/free")) {
                        SignupForm()
                    } else if(window.location.pathname.startsWith("/login")) {
                        SignIn()
                    } else {
                        SignIn()
                    }
            }
        })
        .fontFamily("Nanum")
        .onNavigate(() => {
            this.rerender()
        })
            
    }
}

register(Home)