import React, {useState} from "react";
import { useNavigate } from "react-router-dom";
import FlexibleForm from "../components/FlexibleForm";
import benefitTwoImg from "../assets/img/benefit-two.png";

const SignUp = () => {
    const navigate = useNavigate();

    const [formData, setFormData] = useState({
        name: "",
        email: "",
        password: "",
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };


    const handleSubmit = async (event) => {
        event.preventDefault();

        try {
            const response = await fetch(process.env.REACT_APP_REGISTER_ROUTE, {
                method: "POST",
                body: JSON.stringify(formData),
                headers: {
                    'Content-Type': 'application/json'
                },
            });

            if (!response.ok) {
                throw new Error(await response.text());
            }

            console.log('Form submitted successfully');
            navigate("/login");
        } catch (error) {
            console.error('Error submitting form:', error);
        }
    }

    return (
        <>
            <FlexibleForm
                onFormSubmit={handleSubmit}
                data={{
                    image: benefitTwoImg,
                    title: "Create your account",
                    subtitle: "maybe edit this text hmm",
                    formFields: [
                        { label: "Full Name", name: "name", type: "text", autoComplete: "name", required: true, value: formData.name, onChange: handleChange  },
                        { label: "Email address", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleChange },
                        { label: "Password", name: "password", type: "password", autoComplete: "new-password", required: true, value: formData.password, onChange: handleChange },
                    ],
                    ctaText: "Create Account",
                    ctaLink: { text: "Already have an account?", linkText: "Log in instead!", url: "/login" },
                    underneathButton: {url: "", text: "" }
                }}
            />
        </>
    );
};
export default SignUp;