import React from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import {
    useParams
} from "react-router-dom";

export default function ResourceChart(props) {

    const [data, setData] = React.useState(null);
    let { id } = useParams();
    const loadData = async () => {
        let nextData = await fetch(`/simcompanies/API/day?date=${props["day"]}&kind=${id}`);
        nextData = await nextData.json();
        for (let i = 0; i < nextData.length; i++) {
            nextData[i]["time"] = new Date(nextData[i]["time"]);
            nextData[i]["time"] = nextData[i]["time"].toLocaleTimeString();
        }
        setData(nextData)
    }

    if (data === null) {
        loadData();
    }

    return (
        <LineChart
            width={900}
            height={300}
            data={data}
            margin={{
                top: 5, right: 30, left: 20, bottom: 5,
            }}
        >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" interval="2" />
            <YAxis domain={['datamin', 'datamax']} />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} />
        </LineChart>
    );
}