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

const Reset = () => {

    const {token} = useParams()
    const navigate = useNavigate()
    const {setAuthUser} = useAuthUser()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [samePassword, setSamePassword] = useState('')
    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/reset', {email, token, password, samePassword})
            setAuthUser(res.data.user)
            navigate('/connexion')
        } catch (e) {
            errorCatch(e)
        }
    }

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

            {errorLabel()}

            <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)}>Mot de passe</Field>
            <Field type="password"
                   name="same_password"
                   placeholder="******"
                   value={samePassword}
                   onChange={event => setSamePassword(event.target.value)}>Confirmation du mot de passe</Field>
            <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
        </form>
    </div>
}

export default Reset