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

import 'apexcharts/features/trellis'

// Eighteen stores, one gauge each, every gauge against the SAME target. A
// gauge grid is scannable for "who is under target" in a way an 18-bar chart
// is not, and a radialBar still reads at 120px. The trellis owns the grid,
// the headers and the responsive columns; each panel is a real radialBar.
//
// Deterministic values so the e2e snapshot is stable.
function mulberry32(seed) {
  return function () {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

var STORES = [
  'Aurora',
  'Brookfield',
  'Cedar Park',
  'Dunwoody',
  'Eastvale',
  'Fairfield',
  'Glenview',
  'Harborside',
  'Ironwood',
  'Junction',
  'Kingsford',
  'Lakeshore',
  'Maplewood',
  'Northgate',
  'Oakhurst',
  'Pinecrest',
  'Quarry Bay',
  'Riverton',
]

var rand = mulberry32(20260821)
var gaugeSeries = STORES.map(function (store) {
  // Attainment 48..104%, a few clear laggards in the mix.
  var v = Math.round(48 + rand() * 56)
  return { name: 'Attainment', store: store, data: [Math.min(v, 100)] }
})

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: gaugeSeries,
    options: {
      chart: {
        id: 'gaugeTrellis',
        type: 'radialBar',
        height: 560,
        animations: {
          enabled: false,
        },
      },
      trellis: {
        by: 'store',
        columns: 6,
        minPanelWidth: 150,
        gap: 8,
        panel: function (key, meta) {
          var s = gaugeSeries[meta.index]
          var v = s && s.data[0] ? s.data[0] : 0
          var color = v >= 85 ? '#15803D' : v >= 65 ? '#D97706' : '#DC2626'
          return { colors: [color] }
        },
      },
      plotOptions: {
        radialBar: {
          hollow: {
            size: '54%',
          },
          track: {
            background: '#E5E7EB',
          },
          dataLabels: {
            name: {
              show: false,
            },
            value: {
              show: true,
              offsetY: 6,
              fontSize: '15px',
              fontWeight: 700,
              formatter: function (val) {
                return Math.round(Number(val)) + '%'
              },
            },
          },
        },
      },
      stroke: {
        lineCap: 'round',
      },
      labels: ['Attainment'],
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>Q3 target attainment, store by store</h1>
        <p className="lead">
          Eighteen gauges against one target. Green is done, amber is close, red
          is a conversation: the laggards jump out in a way no 18-bar chart
          manages.
        </p>

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

        <div className="note">
          The radial family needs no scale sharing beyond consistent options,
          which makes it one of the cheapest trellis types: every panel is a
          real radialBar on the same 0-100 track. The traffic-light fill comes
          from
          <code>trellis.panel</code>, the per-panel override hook: it reads each
          panel's own value and hands back a color. Trellis is a premium
          feature; without a license it renders with a trial watermark.
        </div>
      </div>
    </div>
  )
}

export default ApexChart