import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import PropTypes from 'prop-types';
import React from 'react';


const LineGraph = props => {
  const {
    data,
    dataKey,
    height,
    margin,
    maxHeight,
    strokeColor,
    title,
    width,
    xAxisKey
  } = props;

  return (
    <div className='graph'>
      <p className='title'>{title}</p>
      <LineChart
        width={width}
        height={maxHeight > 0 ? (
          height <= maxHeight ? height : maxHeight
        ) : height}
        data={data}
        margin={margin}
      >
        <CartesianGrid strokeDasharray="5 5" />
        <XAxis dataKey={xAxisKey} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey={dataKey} stroke={strokeColor} activeDot={{ r: 8 }} />
      </LineChart>
    </div>
  );
};

LineGraph.propTypes = {
  data: PropTypes.array.isRequired,
  dataKey: PropTypes.string.isRequired,
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  xAxisKey: PropTypes.string.isRequired,

  margin: PropTypes.object,
  maxHeight: PropTypes.number,
  strokeColor: PropTypes.string,
};

LineGraph.defaultProps = {
  margin: {
    top: 20, right: 0, left: 0, bottom: 0,
  },
  maxHeight: -1,
  strokeColor: '#000000',
};

export default LineGraph;