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

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

    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg: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>
        <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="mt-2 px-2 py-1 w-full text-lg font-bold bg-blue-700 rounded">Valider</button>
        </form>
    </Card>
}

export default AddRainfall

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