import React from 'react'
import { AreaChart as _AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, ResponsiveContainer } from 'recharts'

export const AreaChart = (props) => {
  return (
    <ResponsiveContainer>
      <_AreaChart baseValue={props.baseValue} width={props.width} height={props.height} data={props.data}
        margin={props.margin}>
        <defs>
          <linearGradient id="colorDefinition" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor={props.areaStartColor} stopOpacity={0.75} />
            <stop offset="95%" stopColor={props.areaStopColor} stopOpacity={0.75} />
          </linearGradient>
        </defs>

        <If condition={props.showAxisX}><XAxis dataKey="label" /></If>

        <If condition={props.showAxisY}>
          <YAxis />
        </If>

        <If condition={props.showGrid}>
          <CartesianGrid strokeDasharray="3 3" />
        </If>

        <Tooltip
          labelFormatter={(value) => {
            return `${props.data[value].label}`;
          }}
        />
        <Area type="monotone" dataKey="value" stroke={props.areaStokeColor} fillOpacity={1} fill="url(#colorDefinition)" />
      </_AreaChart>
    </ResponsiveContainer>
  )
}

AreaChart.defaultProps = {
  areaStartColor: "var(--colorBlueDark)",
  areaStopColor: "var(--colorBlueDark)",
  areaStrokeColor: "var(--colorWhiteBase)",
  showAxisX: true,
  showAxisY: true,
  showGrid: true,
  showTooltips: true,
  baseValue: 'auto'
}