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.
//
// Drinking water access, one dot per 10 million people (2022 JMP shares,
// rounded). The point of the demo is the LAYOUT, not the chart type: the
// silhouette below is not a built-in arrangement and the engine knows nothing
// about shapes. It is a plain function registered with
// ApexCharts.registerUnitLayout, and switching to it keeps every dot's
// identity, colour and size, so the crowd re-forms instead of being rebuilt.
var WATER = {
  values: [576, 168, 42, 34],
  labels: ['Safely managed', 'Basic', 'Limited', 'Unsafe'],
  colors: ['#008FFB', '#00B8D9', '#FFAB00', '#FF4560'],
}

// A droplet, in a 100x100 box.
var DROPLET = 'M50 4 C50 4 14 46 14 66 A36 36 0 0 0 86 66 C86 46 50 4 50 4 Z'
// Where the shape is "heaviest" - inset rings shrink toward this, not the box
// centre, so the fill stays inside a shape that is not symmetric top-to-bottom.
var DROPLET_CORE = { x: 50, y: 60 }
// Roughly how far the droplet outline sits from its core, in box units. Used
// to turn a dot radius into a ring inset.
var DROPLET_REACH = 40

var _path = null
function dropletPath() {
  if (_path) return _path
  var NS = 'http://www.w3.org/2000/svg'
  var svg = document.createElementNS(NS, 'svg')
  svg.setAttribute('width', '0')
  svg.setAttribute('height', '0')
  svg.setAttribute(
    'style',
    'position:absolute;width:0;height:0;overflow:hidden',
  )
  var p = document.createElementNS(NS, 'path')
  p.setAttribute('d', DROPLET)
  svg.appendChild(p)
  // getTotalLength needs the element in the document to measure reliably.
  document.body.appendChild(svg)
  _path = p
  return _path
}

// The whole extension point: objects in, positions out. No animation, no
// keying, no knowledge of the chart - the engine already tweens position and
// keeps identity across a relayout.
function silhouetteLayout(objects, rect) {
  var path = dropletPath()
  var len = path.getTotalLength()
  if (!len) return []

  // Fit the 100x100 box into the plot rect, leaving a little breathing room.
  var scale = (Math.min(rect.width, rect.height) / 100) * 0.94
  var offX = rect.x + rect.width / 2 - 50 * scale
  var offY = rect.y + rect.height / 2 - 50 * scale

  // Inset copies of the outline, outermost first. Sampling one path only draws
  // a wire outline; nesting scaled copies fills the shape, and keeps this to
  // the widely supported getPointAtLength rather than point-in-fill testing.
  //
  // The inset step comes from the mark radius the engine hands us, so rings sit
  // about one dot apart whatever the plot size or dot count. A fixed list of
  // insets looks like a bullseye as soon as the dots are smaller than the gaps.
  var r = objects[0] && objects[0].r > 0 ? objects[0].r : 3
  var step = (2.1 * r) / (scale * DROPLET_REACH)
  var rings = []
  for (var k = 1; k > 0.06 && rings.length < 60; k -= step) rings.push(k)
  if (!rings.length) rings.push(1)

  // Each ring gets dots in proportion to its perimeter, so density stays even
  // rather than crowding the middle.
  var totalWeight = rings.reduce(function (a, kk) {
    return a + kk
  }, 0)

  var out = []
  var idx = 0
  rings.forEach(function (k, ri) {
    var remaining = objects.length - idx
    var count =
      ri === rings.length - 1
        ? remaining
        : Math.min(remaining, Math.round((objects.length * k) / totalWeight))
    for (var i = 0; i < count; i++) {
      var pt = path.getPointAtLength(((i + 0.5) / count) * len)
      // Shrink toward the core to make this ring's inset copy.
      var sx = DROPLET_CORE.x + (pt.x - DROPLET_CORE.x) * k
      var sy = DROPLET_CORE.y + (pt.y - DROPLET_CORE.y) * k
      out.push({
        id: objects[idx].id,
        x: offX + sx * scale,
        y: offY + sy * scale,
      })
      idx++
    }
  })
  return out
}

ApexCharts.registerUnitLayout('droplet', silhouetteLayout)

var VIEWS = {
  droplet: { layout: 'custom', positions: 'droplet' },
  packed: { layout: 'packed', positions: undefined },
  columns: { layout: 'columns', positions: undefined },
}

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

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [576, 168, 42, 34],
    options: {
      chart: {
        id: 'waterChart',
        type: 'unit',
        height: 460,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Safely managed', 'Basic', 'Limited', 'Unsafe'],
      colors: ['#008FFB', '#00B8D9', '#FFAB00', '#FF4560'],
      plotOptions: {
        unit: {
          layout: 'custom',
          positions: 'droplet',
          transition: 'flow',
          spacing: 1.15,
          clusterLabels: {
            show: false,
          },
        },
      },
      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. (WATER/VIEWS/setActive and the
    // registerUnitLayout call live in the shared head script.)
    let chart
    let current = 'droplet'

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

      setActive(current)

      document.querySelectorAll('.actions button[data-view]').forEach((btn) => {
        btn.addEventListener('click', () => {
          const id = btn.getAttribute('data-view')
          if (id === current) return
          current = id
          setActive(current)
          chart.updateOptions({ plotOptions: { unit: VIEWS[id] } })
        })
      })
    }, 50)

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

  return (
    <div>
      <div className="wrap">
        <h1>820 dots, arranged by a layout the chart does not ship</h1>
        <p>
          One dot per 10 million people, coloured by drinking water access. The
          droplet is a custom layout: a plain function that receives every mark
          and the plot rect and returns positions. Switch views and the same
          dots re-form, keeping their identity and colour, rather than being
          rebuilt.
        </p>

        <div className="actions">
          <button data-view="droplet">Droplet (custom layout)</button>
          <button data-view="packed">Packed</button>
          <button data-view="columns">Columns</button>
        </div>

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

        <p className="note">
          Any silhouette works the same way, which is how a projection can
          supply the positions later without the chart engine changing.
        </p>
      </div>
    </div>
  )
}

export default ApexChart