import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import {
  AreaSeries,
  DiscreteColorLegend,
  FlexibleXYPlot,
  HorizontalGridLines,
  LineSeriesCanvas,
  VerticalGridLines,
  XAxis,
  YAxis,
} from 'react-vis';

class VolumePanel extends React.Component {
  getLegend() {
    return [
      { title: 'Data volume released', color: 'green' },
      { title: 'Data volume produced', color: 'blue' },
    ];
  }

  render() {
    if (this.props.fetching) {
      return null;
    }
    return (
      <Grid fluid>
        <Row>
          <Col sm={12} md={this.props.showTable ? 6 : 12}>
            <FlexibleXYPlot
              height={400}
              //yType="log"
              xType="time"
              margin={{ left: 100 }}
            >
              <XAxis tickLabelAngle={-45} style={{ fontSize: 9 }} />
              <YAxis
                tickLabelAngle={-45}
                tickFormat={(t) => t}
                title={this.props.yTitle}
              />

              <HorizontalGridLines />
              <VerticalGridLines />

              <LineSeriesCanvas
                colorType="literal"
                color="blue"
                opacity={1}
                data={this.props.median}
              />

              <AreaSeries
                colorType="literal"
                opacity={0.7}
                color="blue"
                data={this.props.sum}
              />

              <AreaSeries
                colorType="literal"
                opacity={0.7}
                color="green"
                data={this.props.releaseSum}
              />

              <AreaSeries
                colorType="literal"
                opacity={0.2}
                color="green"
                data={this.props.releaseSumAcc}
              />

              <AreaSeries
                colorType="literal"
                opacity={0.2}
                color="blue"
                data={this.props.sumAcc}
              />

              <DiscreteColorLegend
                orientation="horizontal"
                width={300}
                items={this.getLegend()}
              />
            </FlexibleXYPlot>
          </Col>
        </Row>
      </Grid>
    );
  }
}

export default VolumePanel;
