// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-FileCopyrightText: 2020-2022 grommunio GmbH

import React from 'react';
import { withStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { Typography } from '@mui/material';
import {
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Bar,
  BarChart,
  CartesianGrid,
} from 'recharts';
import { Paper } from '@mui/material';
import { withTranslation } from 'react-i18next';

const styles = theme => ({
  root: {
    flex: 1,
    width: 0,
  },
  chartTitle: {
    margin: theme.spacing(2, 2, 2, 2),
  },
  paper: {
    paddingTop: 1,
    display: 'flex',
  },
});

function LoadChart(props) {
  const { classes, t, load } = props;

  return (
    <Paper className={classes.paper}>
      <div className={classes.root}>
        <Typography className={classes.chartTitle}>{t("Load")}</Typography>
        <ResponsiveContainer width="100%" height={200} >
          <BarChart data={load} margin={{ top: 0, right: 32, left: 10, bottom: 16 }}>
            <defs>
              <linearGradient id="gradientBlue2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#2980B9"} />
                <stop offset="95%" stopColor={"#6DD5FA"} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" />
            <YAxis />
            <Legend />
            <Tooltip labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}/>
            <Bar
              dataKey="value"
              fill="url(#gradientBlue)"/>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Paper>
  );
}

LoadChart.propTypes = {
  classes: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired,
  load: PropTypes.array.isRequired,
};

export default withTranslation()(withStyles(styles)(LoadChart));