import React from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import {
    useParams
} from "react-router-dom";
import CircularProgress from '@material-ui/core/CircularProgress';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
    },
    card: {
        padding: 20
    }
}));

const output = (data) => {
    if (data === null) {
        return (
            <CircularProgress color="secondary" />
        )
    } else {
        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="q0" stroke="#8884d8" dot={false} />
                <Line type="monotone" dataKey="q1" stroke="#000000" dot={false} />
                <Line type="monotone" dataKey="q2" stroke="#82ca9d" dot={false} />
                <Line type="monotone" dataKey="q3" stroke="#ff0066" dot={false} />
                <Line type="monotone" dataKey="q4" stroke="#660066" dot={false} />
                <Line type="monotone" dataKey="q5" stroke="#99cc00" dot={false} />
                <Line type="monotone" dataKey="q6" stroke="#669999" dot={false} />
                <Line type="monotone" dataKey="q7" stroke="#996633" dot={false} />
            </LineChart>
        )
    }
}

export default function ResourceChart(props) {
    const classes = useStyles();
    const [data, setData] = React.useState(null);
    let { id } = useParams();
    const loadData = async () => {
        let dayData = await fetch(`/simcompanies/API/day?kind=${id}`);
        let dataWithDate = await dayData.json();
        let qualitySortedData = [];
        for (let i = 0; i < dataWithDate.length; i++) {
            if (i === 0) qualitySortedData.push(dataWithDate[i]);
            else {
                if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) {
                    switch (dataWithDate[i].quality) {
                        case 0: break;
                        case 1:
                            qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"];
                            break;
                        case 2:
                            qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"];
                            break;
                        case 3:
                            qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"];
                            break;
                        case 4:
                            qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"];
                            break;
                        case 5:
                            qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"];
                            break;
                        case 6:
                            qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"];
                            break;
                        case 7:
                            qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"];
                            break;
                        default:
                            break;
                    }
                } else {
                    qualitySortedData.push(dataWithDate[i]);
                    qualitySortedData[qualitySortedData.length - 1]["q0"] = qualitySortedData[qualitySortedData.length - 1]["price"];
                }
            }
        }
        for (let i = 0; i < qualitySortedData.length; i++) {
            qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
            qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
        }
        console.log(qualitySortedData);
        setData(qualitySortedData)
    }

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

    const handleClick = (e) => {
        loadData()
    }

    return (
        <div className={classes.root}>
            <Grid container spacing={2}>
                <Grid item xs={12}>
                    <Typography variant="h4">
                        Resource Chart
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <Card className={classes.card}>
                        <CardContent>
                            {output(data)}
                        </CardContent>
                        <Button variant="contained" color="secondary" onClick={handleClick}>
                            Refresh
                        </Button>
                    </Card>
                </Grid>
            </Grid>

        </div>
    );
}