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

// Shared by the vanilla-js, React and Vue builds. Two views of one 480-person
// company to show off both layouts: the headcount by department (grouped
// clusters) and the whole company split leadership-vs-staff (packed blob with
// the small leadership core nested in the centre). The live control state lives
// in each format's own wiring below.
var DATASETS = {
  departments: {
    values: [200, 120, 90, 70],
    labels: ['Engineering', 'Sales', 'Operations', 'Design'],
    colors: ['#008FFB', '#00B8D9', '#36B37E', '#FFAB00'],
    layout: 'grouped',
  },
  seniority: {
    values: [60, 420],
    labels: ['Leadership', 'Staff'],
    colors: ['#FFAB00', '#7B8794'],
    layout: 'packed',
  },
}

function randomWorkforce() {
  var eng = Math.floor(Math.random() * 110) + 150
  var sales = Math.floor(Math.random() * 70) + 90
  var ops = Math.floor(Math.random() * 60) + 60
  var design = Math.floor(Math.random() * 50) + 45
  return [eng, sales, ops, design]
}

function setActive(id) {
  document
    .querySelectorAll('.actions button[data-dataset]')
    .forEach(function (btn) {
      btn.classList.toggle('active', btn.getAttribute('data-dataset') === id)
    })
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [200, 120, 90, 70],
    options: {
      chart: {
        id: 'unitChart',
        type: 'unit',
        height: 420,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Engineering', 'Sales', 'Operations', 'Design'],
      colors: ['#008FFB', '#00B8D9', '#36B37E', '#FFAB00'],
      plotOptions: {
        unit: {
          layout: 'grouped',
          shape: 'circle',
          size: 'auto',
          clusterLabels: {
            show: true,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  React.useEffect(() => {
    // The react-apexcharts wrapper owns the render, so reach the live instance by
    // its chart.id, then wire the controls. (DATASETS/randomWorkforce/setActive
    // live in the shared head script.) updateOptions drives the instance directly,
    // so no React state changes under it.
    let chart
    let current = 'departments'

    const timer = window.setInterval(() => {
      chart = ApexCharts.getChartByID('unitChart')
      if (!chart) return
      window.clearInterval(timer)

      setActive(current)

      document
        .querySelectorAll('.actions button[data-dataset]')
        .forEach((btn) => {
          btn.addEventListener('click', () => {
            const id = btn.getAttribute('data-dataset')
            if (id === current) return
            current = id
            setActive(current)
            const ds = DATASETS[id]
            chart.updateOptions({
              colors: ds.colors,
              labels: ds.labels,
              plotOptions: { unit: { layout: ds.layout } },
              series: ds.values,
            })
          })
        })

      document.querySelector('#shuffle').addEventListener('click', () => {
        if (current !== 'departments') return
        chart.updateSeries(randomWorkforce())
      })
    }, 50)

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

  return (
    <div>
      <div className="wrap">
        <h1>Workforce as a dot cluster</h1>
        <p>Every employee is one dot, packed into an organic disc.</p>

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

        <div className="actions">
          <button data-dataset="departments">By department (grouped)</button>
          <button data-dataset="seniority">Leadership vs staff (packed)</button>
        </div>

        <div className="actions">
          <button id="shuffle">Simulate hiring round</button>
        </div>
      </div>
    </div>
  )
}

export default ApexChart