import React from 'react';
import { makeStyles } from '@material-ui/core';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts';

const CustomizedAxisTick = ({ x, y, payload }) => {
  if (!payload.value) {
    return payload.value;
  }
  const parts = payload.value.split(' ');
  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
      <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
    </g>
  );
};

const useStyles = makeStyles((theme) => ({
  chart: {
    backgroundColor: theme.palette.colors.white,
  },
}));

const Graph = ({ type, items }) => {
  const classes = useStyles();

  return (
    <ResponsiveContainer height={400} width="100%" debounce={1} className={classes.chart}>
      <LineChart data={items}>
        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line type="natural" dataKey={type} />
      </LineChart>
    </ResponsiveContainer>
  );
};

export default Graph;