import React, { useRef, useState } from "react";
import { useForm } from "react-hook-form";



function Register() {

    const url = process.env.REACT_APP_API_URL+"myclass/api/add_user_account/";
    const {
        register,
        formState: { errors },
        handleSubmit,
        watch,
    } = useForm();
    const pwd = useRef({});
    pwd.current = watch("pwd", "");
    const [result, setResult] = useState("");
    const onSubmit = async (data) => {
        const formData = new FormData();
        formData.append('name', data.name);
        formData.append('surname', data.surname);
        formData.append('email', data.email);
        formData.append('pwd', data.pwd);
        const res = await fetch(
            url,
            {
                method: "POST",
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json'
                    // 'Content-Type': 'application/x-www-form-urlencoded',
                },
                redirect: 'follow',
                referrerPolicy: 'no-referrer',
                body: formData,
            }
        );
        const results = await res.json();
        //console.log(results);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <h1>Créer votre compte</h1>
            <h3 style={{  fontFamily:'DM Sans' }}>Inscription rapide</h3>
            <div>
                <input
                    {...register("name", {
                        pattern: /^[A-Za-z]+$/i,
                        required: true,
                        maxLength: 20,
                    })}
                    placeholder="First name"
                />
                {errors.name?.type === "required" && "First name is required*"}
            </div>
            <div>
                <input
                    {...register("surname", {
                        pattern: /^[A-Za-z]+$/i,
                        required: true,
                        maxLength: 20,
                    })}
                    placeholder="Last name"
                />
                {errors.surname?.type === "required" &&
                    "Last name is required*"}
            </div>

            <div>
                <input
                    {...register("email", {
                        required: true,
                        pattern:
                            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                    })}
                    placeholder="Email"
                />
                {errors.email?.type === "required" && "Email is required*"}
                {errors.email?.type === "pattern" && "Enter a valid email"}
            </div>
            {/* <div>
                <input
                    {...register("Identifiant", {
                        pattern: /^[A-Za-z]+$/i,
                        required: true,
                        maxLength: 20,
                    })}
                    placeholder="Identifiant"
                />
                {errors.Identifiant?.type === "required" &&
                    "Identifiant is required*"}
            </div> */}

            <div>
                <input
                    type="password"
                    {...register("pwd", {
                        required: "You must specify a password",
                        minLength: {
                            value: 8,
                            message: "Password must have at least 8 characters",
                        },
                    })}
                    placeholder="password"
                />
                {errors.pwd && <p>{errors.pwd.message}</p>}
            </div>

            <div>
                <input
                    type="password"
                    {...register("pwd_repeat", {
                        validate: (value) =>
                            value === pwd.current ||
                            "The passwords do not match",
                    })}
                    placeholder="repeat password"
                />
                {errors.pwd_repeat && <p>{errors.pwd_repeat.message}</p>}
            </div>

            <p>{result}</p>
            <div>
                <input type="submit" />
            </div>
        </form>
    );
}

export default Register;
