import React from 'react';
import PropTypes from 'prop-types';
import { Area, AreaChart, ResponsiveContainer, Tooltip } from 'recharts';
import { useTheme } from '@mui/material/styles';

import CustomTooltip from './CustomTooltip';

function AreaGraph({ gradient = 'areaGradient', tooltipDateFormatter = null, ...props }) {
  const theme = useTheme();
  return (
    <ResponsiveContainer height="99.99%" width="99.99%">
      <AreaChart
        data={props.data}
        margin={{
          top: 2,
          bottom: 0,
          right: 2,
          left: 3,
        }}
        // margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
      >
        <defs>
          <linearGradient id="areaGradient" gradientTransform="rotate(0)">
            <stop offset="-12%" stopColor={theme.palette.primary.main} />
            <stop offset="93%" stopColor="rgba(217, 217, 217, 0)" />
          </linearGradient>

          <linearGradient id="areaGradient2" gradientTransform="rotate(0.12)">
            <stop offset="-57.98%" stopColor={theme.palette.secondary.light} />
            <stop offset="99.89%" stopColor="rgba(217, 217, 217, 0)" />
          </linearGradient>

          <linearGradient id="areaGradient3" gradientTransform="rotate(0.12)">
            <stop offset="-57.98%" stopColor={theme.palette.success.light} />
            <stop offset="99.89%" stopColor="rgba(217, 217, 217, 0)" />
          </linearGradient>
        </defs>

        <Tooltip
          content={<CustomTooltip backgroundColor={props.stroke} tooltipDateFormatter={tooltipDateFormatter} />}
          cursor={false}
        />

        <Area type="monotone" dataKey="value" stroke={props.stroke} fillOpacity={1} fill={`url(#${gradient})`} />
      </AreaChart>
    </ResponsiveContainer>
  );
}

AreaGraph.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      time: PropTypes.number.isRequired,
      value: PropTypes.number.isRequired,
    }),
  ).isRequired,
  stroke: PropTypes.string.isRequired,
  gradient: PropTypes.string,
  tooltipDateFormatter: PropTypes.func,
};

export default AreaGraph;
