import React from 'react'
import ReactApexChart from 'react-apexcharts'
import { ChartComponentProps } from '../types/ChartComponentProps'
import { ChartComponentState } from '../types/ChartComponentState'

class AreaChartComponent extends React.Component<
ChartComponentProps,
ChartComponentState
> {
  constructor(props) {
    super(props)

    this.state = {
      series: [
        {
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100],
        },
        {
          name: 'series2',
          data: [11, 32, 45, 32, 34, 52, 41],
        },
      ],
      options: {
        chart: {
          height: 350,
          type: 'area',
        },
        colors:  ['#22D792','#2C99F7','#FBC445','#F74E49','#717585'] ,

        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: 'smooth',
        },
        xaxis: {
          type: 'datetime',
          categories: [
            '2018-09-19T00:00:00.000Z',
            '2018-09-19T01:30:00.000Z',
            '2018-09-19T02:30:00.000Z',
            '2018-09-19T03:30:00.000Z',
            '2018-09-19T04:30:00.000Z',
            '2018-09-19T05:30:00.000Z',
            '2018-09-19T06:30:00.000Z',
          ],
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm',
          },
        },
      },
    }
  }

  render() {
    return (
      <div id="chart">
        {this.props.dateFilter && <div className="filter-label">  Date: {this.props.dateFilter.toLocaleDateString("en-US")+''}</div>}

        <ReactApexChart
          options={this.state.options}
          series={this.state.series}
          type="area"
          height={'100%'}
        />
      </div>
    )
  }
}

export default AreaChartComponent