import * as React from 'react';
import {inject, observer} from "mobx-react";

const {
  LineChart,
  AreaChart,
  BarChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  ReferenceLine,
  CartesianGrid,
  Tooltip,
  Legend,
  Area,
  ResponsiveContainer
} = require('recharts/umd/Recharts.min');

@inject('appstate')
@observer
export default class SimpleAreaChart extends React.Component {
  constructor (props) {
    super(props);
    this.dashboardStore = props.appstate.dashboard;
    this.userData = props.appstate.userData;
  }
  render() {
    const data = [
      {name: 'Jan', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Feb', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Mar', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Apr', uv: 2780, pv: 3908, amt: 2000},
      {name: 'May', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Jun', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Jul', uv: 3490, pv: 4300, amt: 2100},
    ];
    return (
      <ResponsiveContainer>
        <LineChart width={600} height={(this.userData.role === 'admin') ? 305 : 220} data={data}
                   margin={{top: 5, right: 30, left: 5, bottom: 5}}>
          <XAxis dataKey="name" fontSize={10}/>
          <YAxis fontSize={10} />
          <CartesianGrid strokeDasharray="0.1 0.1"/>
          <Tooltip/>
          <Legend />
          <Line type="natural" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>
    );
  }

}