import React, { memo } from "react";
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { useTranslation, Trans } from 'react-i18next';

const CustomTooltip = ({ active, payload, label }) => {

    const { t } = useTranslation();

    if (active && payload && payload.length) {
        return (
        <div className="custom-tooltip">
            <p className="label" style={ {'color':'#221d58'} } >{`${label}`}</p>
        </div>
        );
    }

    return null;
};

const GraphChart = ({ data }) => {
    var first_val = data[0]['name'];
    var last_val = data[data.length - 1]['name'];

    var ticks = Math.floor(last_val / 500);
    var tick_array = [];
    for(var i = 0;i < ticks;++i) {
        tick_array.push((i+1) * 500);
    }
    return (
    <>
        <ResponsiveContainer width={'99%'} height={475}>
            <AreaChart>
                <defs>
                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#b4eded" stopOpacity={1}/>
                        <stop offset="100%" stopColor="#FFFFFF" stopOpacity={0.1}/>
                    </linearGradient>
                </defs>
                <XAxis  tick={{ fill: '#FFFFFF' }} stroke="#BFBECF" dataKey="name" ticks={[first_val, last_val]} />
                <YAxis tick={{ fill: '#FFFFFF' }} stroke="#BFBECF" ticks={tick_array} />
                <Tooltip content={<CustomTooltip />} />
                <Area  dot={false} strokeWidth={2} data={ data } fill="url(#colorUv)" dataKey="value" stroke="#FFFFFF" />
            </AreaChart></ResponsiveContainer>
    </>
    )
}

export default memo(GraphChart);