import React, {FC, useEffect, useState} from "react"
import useAxiosTools from "../../hooks/AxiosTools"
import {rainfall} from "../../types"
import {AxiosError} from "axios"
import Card from "../Card"
import {Link} from "react-router-dom"

const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {

    const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
    const [data, setData] = useState<rainfall[]>([])

    useEffect(() => {
        fetchData()
    }, [loadedAt])

    const fetchData = async () => {
        try {
            const res = await axiosGet('/api/rainfalls/last')
            setData(res.data)
        } catch (e) {
            if (e instanceof AxiosError) {
                setError(e.message)
            } else {
                errorCatch(e)
            }
        }
    }

    return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
        <h1 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">5 dernières mesures</h1>
        {errorLabel()}
        <table className="w-full text-center">
            <tbody>
                {data.map(line => <tr key={line.id} className="">
                    <td>{(new Date(line.date)).toLocaleDateString()}</td>
                    <td className="px-2 text-right">{line.value}</td>
                </tr>)}
            </tbody>
        </table>
        <Link to="/pluviometrie/mesures">Tous les mesures</Link>
    </Card>
}

export default LastFiveMesure

interface LastFiveMesureProps {
    loadedAt: Date,
}