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 {errorCatch, errorLabel, axiosPost} = useAxiosTools()
    const [date, setDate] = useState((new Date()).toSQLDate())
    const [value, setValue] = useState<null|number>(null)

    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault()
        try {
            await axiosPost('/api/rainfalls', {date, value})
            setDate((new Date()).toSQLDate())
            setValue(null)
            reload(new Date())
        } catch (error) {
            errorCatch(error)
        }
    }

    return <Card className="min-w-[300px] overflow-hidden self-start w-full md:w-auto">
        <h2 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">
            Ajout d'une mesure
        </h2>
        {errorLabel()}
        <form onSubmit={handleSubmit} className="p-2 flex flex-col gap-2">
            <Field type="date"
                   name="date"
                   placeholder="Email"
                   value={date}
                   onChange={event => setDate(event.target.value)}
                   autoFocus>Date</Field>
            <Field type="number"
                   name="value"
                   placeholder="10"
                   value={value}
                   onChange={event => setValue(Number(event.target.value))}>Mesure</Field>

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

export default AddRainfall

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