import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

// This demo also loads: https://apexcharts.com/samples/assets/ohlc.js

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        data: seriesData,
      },
    ],
    options: {
      chart: {
        type: 'candlestick',
        height: 290,
        id: 'candles',
        toolbar: {
          autoSelected: 'pan',
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      plotOptions: {
        candlestick: {
          colors: {
            upward: '#26A69A',
            downward: '#EF5350',
          },
        },
      },
      xaxis: {
        type: 'datetime',
      },
    },
    seriesBar: [
      {
        name: 'Monthly Change',
        data: seriesDataLinear,
      },
    ],
    optionsBar: {
      chart: {
        height: 160,
        type: 'bar',
        brush: {
          enabled: true,
          target: 'candles',
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('20 Jan 2017').getTime(),
            max: new Date('10 Dec 2017').getTime(),
          },
          fill: {
            color: '#ccc',
            opacity: 0.4,
          },
          stroke: {
            color: '#0D47A1',
          },
        },
      },
      dataLabels: {
        enabled: false,
      },
      plotOptions: {
        bar: {
          columnWidth: '80%',
          colors: {
            ranges: [
              {
                from: -1000,
                to: 0,
                color: '#F15B46',
              },
              {
                from: 1,
                to: 10000,
                color: '#FEB019',
              },
            ],
          },
        },
      },
      stroke: {
        width: 0,
      },
      xaxis: {
        type: 'datetime',
        axisBorder: {
          offsetX: 13,
        },
      },
      yaxis: {
        labels: {
          show: false,
        },
      },
    },
  })

  return (
    <div>
      <div className="chart-box">
        <div id="chart-candlestick">
          <ReactApexChart
            options={state.options}
            series={state.series}
            type="candlestick"
            height={290}
          />
        </div>
        <div id="chart-bar">
          <ReactApexChart
            options={state.optionsBar}
            series={state.seriesBar}
            type="bar"
            height={160}
          />
        </div>
      </div>
    </div>
  )
}

export default ApexChart