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

function series() {
  var out = []
  var v = 100
  for (var i = 0; i < 60; i++) {
    v += 2 + Math.sin(i / 5) * 3
    out.push([i, Math.round(v)])
  }
  return out
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [{ name: 'Price', data: series() }],
    options: {
      chart: {
        id: 'price',
        type: 'area',
        height: 380,
        fontFamily: 'Helvetica, Arial, sans-serif',
        animations: { enabled: false },
        measure: { enabled: true, pinOnRelease: true },
        toolbar: { show: true, autoSelected: 'measure' },
        zoom: { enabled: true, type: 'x' },
      },
      stroke: { width: 2, curve: 'straight' },
      dataLabels: { enabled: false },
      title: { text: 'Price (measure any move)', align: 'left' },
      xaxis: { type: 'numeric', title: { text: 'Session' } },
      yaxis: { title: { text: 'Price' }, decimalsInFloat: 0 },
    },
  })

  React.useEffect(() => {
    // The ruler tool is pre-selected via toolbar.autoSelected: 'measure', so the
    // plot is armed on load. The react-apexcharts wrapper owns the render, so
    // reach the live instance by its chart.id, then wire the same handlers the
    // vanilla build does. (series() lives in the shared head script.)
    let chart
    const timer = window.setInterval(() => {
      chart = ApexCharts.getChartByID('price')
      if (!chart) return
      window.clearInterval(timer)

      const readout = document.getElementById('mz-readout')

      document.getElementById('mz-clear').addEventListener('click', () => {
        chart.clearMeasures()
      })

      chart.addEventListener('measured', (c, o) => {
        readout.textContent =
          'dx=' +
          Number(o.dx).toFixed(2) +
          '  dy=' +
          Number(o.dy).toFixed(2) +
          '  (' +
          (o.percentChange >= 0 ? '+' : '') +
          Number(o.percentChange).toFixed(1) +
          '%)'
      })
    }, 50)

    return () => window.clearInterval(timer)
  }, [])

  return (
    <div>
      <div className="mz-wrap">
        <div className="mz-bar">
          <button id="mz-clear">Clear</button>
          <span className="readout" id="mz-readout">
            The ruler tool is pre-selected in the toolbar. Drag from A to B on
            the chart.
          </span>
        </div>

        <div id="chart">
          <ReactApexChart
            options={state.options}
            series={state.series}
            type="area"
            height={380}
          />
        </div>

        <div className="mz-note">
          The ruler is a built-in <b>toolbar tool</b>, pre-selected here with
          <code>toolbar.autoSelected: 'measure'</code>. Drag across the plot: a
          shaded band spans the two points and a readout shows the <b>change</b>
          , the
          <b>% change</b> and the <b>range</b> between them, with the endpoints
          snapped to the price line (the finance-style default,{' '}
          <code>measure.mode: 'span'</code>). Green means the move is up, red
          means down. Release to pin it; a pinned ruler is stored in data
          coordinates, so it stays glued when you zoom or resize. Click the
          ruler icon again to deselect it and hand the plot back to zoom; the
          <code>m</code> key still works too. Fires the <code>measured</code>{' '}
          event. Set
          <code>measure.mode: 'free'</code> for a diagonal ruler between any two
          points. Needs the <code>measure</code> feature. <b>Clear</b> removes
          all rulers.
        </div>
      </div>
    </div>
  )
}

export default ApexChart