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

const Login = () => {

    const navigate = useNavigate()
    const {setAuthUser} = useAuthUser()
    const [email, setEmail] = useState('')
    const [password, setPassword] = 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/login', {email, password})
            setAuthUser(res.data.user)
            navigate('/')
        } catch (error) {
            errorCatch(error)
        }
    }

    return <div>
        <Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
            <form onSubmit={handleSubmit}>
                <h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
                    Connexion
                </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>
                <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
                <Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
            </form>
        </Card>
    </div>
}

export default Login