import React, {FC, useState, useEffect} from "react"
import Card from "../Card"
import useAxiosTools from "../../hooks/AxiosTools"
import {AxiosError} from "axios"
import {monthlyRainfall} from "../../types"

const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {

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

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

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

    return <div>
        <Card className="w-full 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">Précipitations des derniers mois</h1>
            {errorLabel()}
            <table className="w-full overflow-y-scroll text-center">
                <thead>
                    <tr>
                        <th>Mois</th>
                        <th>{(new Date).getFullYear()}</th>
                        <th>{(new Date).getFullYear() - 1}</th>
                    </tr>
                </thead>
                <tbody>
                {Object.entries(data)
                    .map(([month, months]) => <tr key={month}>
                            <td>{months[0].label}</td>
                            <td>{months.find(m => m.year === (new Date).getFullYear() && m.month === Number(month))?.values}</td>
                            <td>{months.find(m => m.year === ((new Date).getFullYear() - 1) && m.month === Number(month))?.values}</td>
                        </tr>
                    )}
                {/*<tr className="font-semibold">*/}
                {/*    <td>Total</td>*/}
                {/*    {Object.entries(data).at(0).at(1).map(i => i.year)*/}
                {/*        .sort((a,b) => b > a)*/}
                {/*        .map(year => <td key={year}>*/}
                {/*            {Object.entries(data).reduce((acc, item) => {*/}
                {/*                    console.log(item.at(1), year)*/}
                {/*                    item.at(1).forEach(month => {*/}
                {/*                        console.log(month)*/}
                {/*                        if(month.year === year) {*/}
                {/*                            acc += month.values*/}
                {/*                        }*/}
                {/*                    })*/}
                {/*                    return acc*/}
                {/*                }, 0)}*/}
                {/*        </td>)}*/}
                {/*</tr>*/}
                </tbody>
            </table>
        </Card>
    </div>
}

export  default YearRainfall

interface YearRainfallProps {
    loadedAt: Date,
}