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

// ── Reproducible synthetic data (seeded PRNG, no network) ──────────────
function mulberry32(a) {
  return function () {
    a |= 0
    a = (a + 0x6d2b79f5) | 0
    var t = Math.imul(a ^ (a >>> 15), 1 | a)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}
var rng = mulberry32(98761234)

function gauss(mean, sd) {
  var u = 0,
    v = 0
  while (u === 0) u = rng()
  while (v === 0) v = rng()
  return mean + sd * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v)
}

function quantile(sorted, q) {
  var pos = (sorted.length - 1) * q
  var b = Math.floor(pos)
  var r = pos - b
  return sorted[b + 1] !== undefined
    ? sorted[b] + r * (sorted[b + 1] - sorted[b])
    : sorted[b]
}

// For each region draw a sample, then derive both the 5-number summary (the box)
// and keep the raw observations (the overlaid points).
function buildBox(name, n, mean, sd) {
  var data = []
  for (var i = 0; i < n; i++) data.push(Math.round(gauss(mean, sd) * 10) / 10)
  var s = data.slice().sort(function (a, b) {
    return a - b
  })
  return {
    x: name,
    y: [
      s[0],
      quantile(s, 0.25),
      quantile(s, 0.5),
      quantile(s, 0.75),
      s[s.length - 1],
    ],
    points: data,
  }
}

var REGIONS = [
  buildBox('North', 45, 68, 8),
  buildBox('South', 45, 74, 6),
  buildBox('East', 45, 61, 11),
  buildBox('West', 45, 70, 7),
]

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Response time',
        type: 'boxPlot',
        data: REGIONS,
      },
    ],
    options: {
      chart: {
        type: 'boxPlot',
        height: 460,
      },
      title: {
        text: 'Response time distribution by region',
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: '50%',
        },
        boxPlot: {
          colors: { upper: '#5b8def', lower: '#a3c0f9' },
          // overlay each raw observation as a jittered dot
          points: { show: true, size: 3, jitter: 0.6 },
        },
      },
      stroke: { colors: ['#37474f'] },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="boxPlot"
          height={460}
        />
      </div>
    </div>
  )
}

export default ApexChart