import React, {useEffect, useState} from "react"
import PageLayout from "../components/PageLayout";
import LastFiveMesure from "../components/rainfall/LastFiveMesure";
import AddRainfall from "../components/rainfall/AddRainfall";
import RainfallGraph from "../components/rainfall/RainfallGraph";
import useAxiosTools from "../hooks/AxiosTools";
import {rainfall} from "../types";
import Field from "../components/Field";
import useDimension from "../hooks/DimensionHook";

const Rainfall = () => {

    const [loadedAt, reload] = useState(new Date)
    const [graphData, setGraphData] = useState<rainfall[]>([])
    const [graphDetails, setGraphDetails] = useState({
        start_date: (new Date((new Date()).setMonth((new Date).getMonth() - 1))).toSQLDate(),
        end_date: (new Date()).toSQLDate(),
    })
    const {errorCatch, errorLabel, axiosGet} = useAxiosTools()
    const {targetRef, dimensions} = useDimension()

    useEffect(() => {
        fetchGraphData()
    }, [loadedAt, graphDetails])

    const fetchGraphData = async () => {
        try {
            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}`
            const res = await axiosGet(`/api/rainfalls/graph?${params}`)
            setGraphData(res.data)
        } catch (error) {
            errorCatch(error)
        }
    }

    return <PageLayout>
        <div className="flex flex-wrap gap-2 justify-between">
            <LastFiveMesure loadedAt={loadedAt} />
            <AddRainfall reload={reload} />
        </div>

        {errorLabel()}
        <form className="flex mb-2 mx-5 gap-2">
            <Field name="start_date"
                   type="date"
                   value={graphDetails.start_date}
                   onChange={e => setGraphDetails({...graphDetails, start_date: (new Date(e.target.value)).toSQLDate()})} />
            <Field name="start_date"
                   type="date"
                   value={graphDetails.end_date}
                   onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
        </form>
        <div ref={targetRef} className="mb-20">
            <RainfallGraph width={dimensions.width}
                           height={500}
                           data={graphData} start_date={graphDetails.start_date}
                           end_date={graphDetails.end_date} />
        </div>
    </PageLayout>
}

export default Rainfall