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

// This demo also loads: https://cdn.jsdelivr.net/npm/apexcharts/dist/unit-shapes.js
// This demo also loads: https://cdn.jsdelivr.net/npm/apexcharts/dist/pictograms.js

// Shared by the vanilla-js, React and Vue builds. Layout and mark are two
// INDEPENDENT choices, so the state is two fields and the update payload sets
// each from its own field; nothing here knows which combination is selected.
var pictoState = { layout: 'heart', mark: 'person' }

// The updateOptions payload for the current pair. An empty mark means "no
// glyph", which is just the ordinary dot the chart drew before pictograms
// existed - `shape` carries that, so `pictogram.mark` is left alone.
function pictoOptions() {
  return {
    plotOptions: {
      unit: {
        positions: pictoState.layout,
        shape: pictoState.mark ? 'pictogram' : 'circle',
        pictogram: { mark: pictoState.mark || undefined },
      },
    },
  }
}

function pictoPaint() {
  document.querySelectorAll('#layout-nav button').forEach(function (b) {
    b.classList.toggle(
      'on',
      b.getAttribute('data-layout') === pictoState.layout,
    )
  })
  document.querySelectorAll('#mark-nav button').forEach(function (b) {
    b.classList.toggle('on', b.getAttribute('data-mark') === pictoState.mark)
  })
}

// Wire both button rows to a live chart instance. Each format hands over its
// own instance; the behaviour is identical.
function pictoWire(chart) {
  document.querySelectorAll('#layout-nav button').forEach(function (b) {
    b.addEventListener('click', function () {
      pictoState.layout = b.getAttribute('data-layout')
      chart.updateOptions(pictoOptions(), false, true)
      pictoPaint()
    })
  })
  document.querySelectorAll('#mark-nav button').forEach(function (b) {
    b.addEventListener('click', function () {
      pictoState.mark = b.getAttribute('data-mark')
      chart.updateOptions(pictoOptions(), false, true)
      pictoPaint()
    })
  })
  pictoPaint()
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [820, 410, 170],
    options: {
      chart: {
        type: 'unit',
        id: 'pictoCrowd',
        height: 460,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Weekday shifts', 'Weekend shifts', 'On call'],
      colors: ['#1D4E89', '#00A6A0', '#FF8A3D'],
      plotOptions: {
        unit: {
          layout: 'custom',
          positions: 'heart',
          // A glyph, not a dot. `mark` names one of the pictograms; the chart fits
          // it to the box the dot would have occupied, so switching between them
          // never re-flows the layout.
          shape: 'pictogram',
          pictogram: {
            mark: 'person',
          },
          // The same specific volunteer keeps their glyph and colour when the layout
          // changes, so a shape swap reads as the crowd walking rather than as a
          // slideshow.
          transition: 'flow',
          unitValue: 10,
          clusterLabels: {
            show: false,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  React.useEffect(() => {
    // Reach the live instance by its chart.id, then wire the buttons.
    // updateOptions drives the instance directly, so no React state changes
    // under it.
    const timer = window.setInterval(() => {
      const chart = ApexCharts.getChartByID('pictoCrowd')
      if (!chart) return
      window.clearInterval(timer)
      pictoWire(chart)
    }, 50)

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

  return (
    <div>
      <div className="wrap">
        <h1>1,400 volunteers, one glyph each</h1>
        <p>
          Two independent choices. <b>Layout</b> is where the units go: a heart,
          a house, a plain grid. <b>Mark</b> is what one unit looks like: a dot,
          or a pictogram. They compose, so a crowd of people can be arranged
          into a heart and the same crowd can walk into a house without either
          choice knowing about the other. Pick one of each.
        </p>

        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="unit"
              height={460}
            />
          </div>
        </div>

        <div className="controls" id="layout-nav">
          <button data-layout="heart" className="on">
            Heart
          </button>
          <button data-layout="human">Person</button>
          <button data-layout="house">House</button>
          <button data-layout="tree">Tree</button>
        </div>
        <div className="controls" id="mark-nav">
          <button data-mark="person" className="on">
            Person
          </button>
          <button data-mark="house">House</button>
          <button data-mark="heart">Heart</button>
          <button data-mark="tree">Tree</button>
          <button data-mark="">Plain dot</button>
        </div>

        <p className="note">
          1 glyph = 10 volunteers. Each glyph is one drawn path, filled in its
          own colour, so the crowd stays this size without a per-icon image or a
          recolour filter.
        </p>
      </div>
    </div>
  )
}

export default ApexChart