import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
import Field from "../../components/Field";
import axios from "axios";
import {useNavigate} from "react-router-dom";

const Register = () => {

    const navigate = useNavigate()
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault()
        try {
            await axios.get('/sanctum/csrf-cookie')
            const res = await axios.post('/api/register', {name, email, password})
            console.log(name, email, password)
            navigate('/')
        } catch (e) {
            console.error(e)
        }
    }

    return <div>
        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
            <h1 className="text-center">S'inscrire</h1>

            <Field placeholder="Nom"
                   name="name"
                   value={name}
                   onChange={event => setName(event.target.value)}
                   autoFocus>Nom</Field>
            <Field type="email"
                   name="email"
                   placeholder="Email"
                   value={email}
                   onChange={event => setEmail(event.target.value)}
                   autoFocus>Email</Field>
            <Field type="password"
                   name="password"
                   placeholder="******"
                   value={password}
                   onChange={event => setPassword(event.target.value)}
                   autoFocus>Mot de passe</Field>
            <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
        </form>
    </div>
}

export default Register
