import React, {Dispatch, FC, FormEvent, SetStateAction, useState} from "react"
import useAxiosTools from "../../hooks/AxiosTools"
import Field from "../Field"
import Card from "../Card"

const AddRainfall: FC<AddRainfallProps> = ({reload}) => {

    const {loading, setLoading, errorCatch, errorLabel, cleanErrors, axiosPost} = useAxiosTools()
    const [data, setData] = useState<{date: string, value: null|number}>({date: (new Date()).toSQLDate(), value: null})

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault()
        cleanErrors()
        setLoading(true)
        try {
            await axiosPost('/api/rainfalls', data)
            setData({date: (new Date()).toSQLDate(), value: null})
            reload(new Date())
        } catch (error) {
            errorCatch(error)
        } finally {
            setLoading(false)
        }
    }

    return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
        <h2 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">
            Ajout d&apos;une mesure
        </h2>
        {errorLabel()}
        <form onSubmit={handleSubmit} className="flex flex-col gap-2 p-2">
            <Field type="date"
                   name="date"
                   value={data.date}
                   onChange={event => setData({...data, date: event.target.value})}
                   autoFocus>
                Date
            </Field>
            {!loading ? <Field type="number"
                   name="value"
                   value={data.value}
                   onChange={event => setData({...data, value: Number(event.target.value)})}>
                Mesure
            </Field> : <div className="h-[74px]" />}

            <button type="submit" disabled={loading} className="btn-primary mt-2 w-full text-lg font-bold">Valider</button>
        </form>
    </Card>
}

export default AddRainfall

interface AddRainfallProps {
    reload: Dispatch<SetStateAction<Date>>
}