class SignupForm extends Shadow {

    errorMessage = "Error signing up. Please try again later or email samuel@sun.museum if the problem persists."
    successMessage = `Success! You may now <a style="color: black; text-decoration: underline" href="/login">log in</a>.`

    inputStyles(el) {
        return el
        .border("1px solid var(--accent)")
        .color("var(--accent)")
    }

    render() {
        ZStack(() => {
            img("/_/icons/columnred.svg", window.isMobile() ? "5vmax" : "3vmax")
                .position("absolute")
                .top(2, em)
                .left(2, em)
                .onClick((done) => {
                    window.navigateTo("/")
                })
                
            form(() => {
                
                VStack(() => {

                    p()
                        .attr({id: "signupMessage"})
                        .display("none")
                        .padding(1, em)
                        .color("var(--main)")
                        .background("var(--accent)")

                    HStack(() => {
                        
                        VStack(() => {
                            input("Email*")
                                .attr({name: "email", type: "email", required: "true"})
                                .styles(this.inputStyles)

                            input("First Name*")
                                .attr({name: "firstName", type: "name", required: "true"})
                                .styles(this.inputStyles)
                            
                            input("Last Name*")
                                .attr({name: "lastName", type: "name", required: "true"})
                                .styles(this.inputStyles)
                            
                            input("Password*")
                                .attr({name: "password", type: "password", required: "true"})
                                .styles(this.inputStyles)
            
                            input("Confirm Password*")
                                .attr({name: "password", type: "password", required: "true"})
                                .styles(this.inputStyles)
                        })
                        .width(100, "%")
                        .gap(1, em)    
                    })
                    .gap(2, em)
                    .width(100, pct)

                    button("Submit")
                })
                .gap(2, em)
            })
            .color("var(--accent)")
            .onSubmit(async (e) => {
                e.preventDefault()
                console.log("submitting")
                $("#signupMessage").style.display = "none"

                const formData = new FormData(this.$("form"));
                const data = Object.fromEntries(formData.entries());
                let newMember = {
                    "email": data.email,
                    "firstName": data.firstName,
                    "lastName": data.lastName,
                    "password": data.password
                }

                try {
                    const response = await fetch(window.location.pathname + window.location.search, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(newMember)
                    });

                    if (!response.ok) {
                        $("#signupMessage").style.display = "block"
                        $("#signupMessage").innerHTML = this.errorMessage
                        throw new Error(`HTTP error! status: ${response.status}`);
                    } else {
                        $("#signupMessage").style.display = "block"
                        $("#signupMessage").innerHTML = this.successMessage
                    }

                } catch (err) {
                    console.error("Fetch error:", err);
                }
            })
            .x(50, vw).y(53, vh)
            .width(30, vmax)
            .center()
        })
    }
}

register(SignupForm)