import moment from 'moment';
import React from 'react';
import { Col, Grid, Panel, Row } from 'react-bootstrap';
import {
  AreaSeries,
  DiscreteColorLegend,
  FlexibleXYPlot,
  HorizontalGridLines,
  LineSeriesCanvas,
  MarkSeriesCanvas,
  VerticalGridLines,
  XAxis,
  YAxis,
} from 'react-vis';
import ResponsiveTable from '../../Table/ResponsiveTable';

class FileCountPanel extends React.Component {
  getData() {
    const count = this.props.sum
      ? this.props.sum.length
      : this.props.max.length;
    const data = [];
    const keys = ['sum', 'average', 'median', 'accSum', 'max'];
    for (let i = 0; i < count; i++) {
      data.push({ i });
      keys.forEach((key) => {
        if (this.props[key]) {
          if (this.props[key][i]) {
            data[data.length - 1].date = moment(this.props[key][i].x).format(
              'YYYY/MM/DD'
            );
            data[data.length - 1][key] = this.props[key][i].y;
          }
        }
      });
    }
    return data;
  }

  getColumns() {
    return [
      {
        text: 'i',
        dataField: 'i',
        hidden: true,
      },
      {
        text: 'Date',
        dataField: 'date',
        sort: true,
      },
      {
        text: 'Sum',
        dataField: 'sum',
        hidden: !this.props.sum,
        sort: true,
      },
      {
        text: 'Average',
        dataField: 'average',
        hidden: !this.props.average,
        sort: true,
      },
      {
        text: 'Median',
        dataField: 'median',
        hidden: !this.props.median,
        sort: true,
      },
      {
        text: 'AccSum',
        dataField: 'accSum',
        hidden: !this.props.accSum,
        sort: true,
      },
      {
        text: 'Max',
        dataField: 'max',
        hidden: !this.props.max,
        sort: true,
      },
    ];
  }
  getLegend() {
    return [
      { title: 'Max', color: 'red', strokeStyle: 'dashed' },
      { title: 'Average', color: 'green' },
      { title: 'Median', color: 'blue' },
      { title: 'Sum', color: 'orange' },
    ];
  }

  render() {
    function getLineSeriesCanvas(data, color) {
      return (
        <LineSeriesCanvas
          colorType="literal"
          color={color}
          opacity={1}
          data={data}
        />
      );
    }

    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 />

              {getLineSeriesCanvas(this.props.median, 'blue')}
              {getLineSeriesCanvas(this.props.average, 'green')}
              {getLineSeriesCanvas(this.props.sum, 'orange')}

              <MarkSeriesCanvas
                colorType="literal"
                opacity={1}
                color="red"
                size="1"
                data={this.props.max}
              />

              <AreaSeries
                colorType="literal"
                opacity={1}
                color="purple"
                size="1"
                data={this.props.sumAcc}
              />
            </FlexibleXYPlot>
            <DiscreteColorLegend
              orientation="horizontal"
              width={300}
              items={this.getLegend()}
            />
          </Col>
          <Col sm={12} md={12}>
            <Panel>
              <Panel.Heading>
                <Panel.Title toggle>Show statistics and raw data</Panel.Title>
              </Panel.Heading>
              <Panel.Collapse>
                <Panel.Body>
                  <ResponsiveTable
                    data={[
                      {
                        i: 0,
                        date: null,
                        sum: this.props.sum
                          .map((s) => s.y)
                          .reduce((a, b) => a + b, 0)
                          .toFixed(0),
                        max: Math.max(...this.props.sum.map((s) => s.y)),
                        median: (
                          this.props.median
                            .map((s) => s.y)
                            .reduce((a, b) => a + b, 0) /
                          this.props.median.length
                        ).toFixed(0),
                        average: (
                          this.props.average
                            .map((s) => s.y)
                            .reduce((a, b) => a + b, 0) /
                          this.props.average.length
                        ).toFixed(0),
                      },
                    ]}
                    columns={this.getColumns()}
                  />

                  <ResponsiveTable
                    data={this.getData()}
                    columns={this.getColumns()}
                  />
                </Panel.Body>
              </Panel.Collapse>
            </Panel>
          </Col>
        </Row>
      </Grid>
    );
  }
}

export default FileCountPanel;
