import React, {FormEvent, SyntheticEvent, useState} from "react"
import Field from "../../components/Field";
import axios from "axios";
import {useNavigate} from "react-router-dom";
import useAuthUser from "../../hooks/AuthUser";
import useAxiosTools from "../../hooks/AxiosTools";

const ForgotPassword = () => {

    const [email, setEmail] = useState('')
    const [message, setMessage] = useState(false)
    const {errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost} = useAxiosTools()

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault()
        try {
            cleanErrors()
            await axiosGet('/sanctum/csrf-cookie')
            const res = await axiosPost('/api/forgot', {email})
            setMessage(true)
        } catch (e) {
            errorCatch(e)
        }
    }

    return <div>
        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
            <h1 className="text-center">Mot de passe oublié</h1>

            {message && <p className="bg-green-600">Un email vous a été envoyé pour modifier le mot de passe.</p>}

            {errorLabel()}

            <Field type="email"
                   name="email"
                   placeholder="Email"
                   value={email}
                   onChange={event => setEmail(event.target.value)}
                   autoFocus>Email</Field>
            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
        </form>
    </div>
}

export default ForgotPassword