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

// Per-unit data: every dot is ONE person, carrying its own name, role and
// (optionally) colour. The chart groups people by team; team leads get their
// own fillColor so a single dot stands out from its cluster. Hover any dot to
// read that individual's details, not the team aggregate. Shared by the
// vanilla-js, React and Vue builds.
var LEAD = '#FFAB00' // a lead's dot is tinted amber, overriding the team colour

var ROSTER = [
  {
    name: 'Engineering',
    data: [
      { name: 'Ana Ruiz', role: 'Engineering Lead', fillColor: LEAD },
      { name: 'Ben Cho', role: 'Staff Engineer' },
      { name: 'Priya Nair', role: 'Senior Engineer' },
      { name: 'Marco Silva', role: 'Senior Engineer' },
      { name: 'Yuki Tanaka', role: 'Engineer' },
      { name: 'Sam Okoye', role: 'Engineer' },
      { name: 'Lena Fischer', role: 'Engineer' },
      { name: 'Diego Torres', role: 'Engineer' },
      { name: 'Hana Kim', role: 'Junior Engineer' },
      { name: 'Omar Haddad', role: 'Junior Engineer' },
    ],
  },
  {
    name: 'Design',
    data: [
      { name: 'Noa Levi', role: 'Design Lead', fillColor: LEAD },
      { name: 'Tom Beck', role: 'Senior Designer' },
      { name: 'Ivy Chen', role: 'Product Designer' },
      { name: 'Kofi Mensah', role: 'Product Designer' },
      { name: 'Sara Nowak', role: 'Designer' },
      { name: 'Leo Rossi', role: 'Designer' },
    ],
  },
  {
    name: 'Sales',
    data: [
      { name: 'Mara Vidal', role: 'Sales Lead', fillColor: LEAD },
      { name: 'Jon Park', role: 'Account Executive' },
      { name: 'Ella Brandt', role: 'Account Executive' },
      { name: 'Raj Mehta', role: 'Account Executive' },
      { name: 'Fay Duval', role: 'SDR' },
      { name: 'Cole Ward', role: 'SDR' },
      { name: 'Nia Abara', role: 'SDR' },
      { name: 'Theo Blanc', role: 'SDR' },
    ],
  },
]

// Return the tooltip body for one hovered person: name on top, role beneath.
function rosterTooltip(o) {
  if (!o.datum) return o.seriesName
  return (
    '<div style="font-weight:700">' +
    o.datum.name +
    '</div>' +
    '<div style="opacity:0.7">' +
    o.datum.role +
    '</div>'
  )
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: ROSTER,
    options: {
      chart: {
        type: 'unit',
        height: 440,
        animations: {
          enabled: true,
          speed: 700,
        },
      },
      colors: ['#008FFB', '#00B8D9', '#36B37E'],
      legend: {
        show: false,
      },
      plotOptions: {
        unit: {
          layout: 'grouped',
          spacing: 1.2,
          clusterLabels: {
            show: true,
            // Team name + headcount, e.g. "Engineering (10)".
            formatter: function (name, opts) {
              return name + ' (' + opts.value + ')'
            },
          },
          tooltip: {
            // rosterTooltip lives in the shared head script.
            formatter: rosterTooltip,
          },
        },
      },
    },
  })

  // Nothing extra to wire: the chart renders from the options above. ROSTER and
  // rosterTooltip live in the shared head script.

  return (
    <div>
      <div className="wrap">
        <h1>Team roster</h1>
        <p>One dot per person, grouped by team, each carrying its own data.</p>

        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="unit"
              height={440}
            />
          </div>
          <div className="legend-note">
            <span>
              <span className="swatch" style="background:#008FFB"></span>
              Engineering
            </span>
            <span>
              <span className="swatch" style="background:#00B8D9"></span>Design
            </span>
            <span>
              <span className="swatch" style="background:#36B37E"></span>Sales
            </span>
            <span>
              <span className="swatch" style="background:#FFAB00"></span>Team
              lead
            </span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ApexChart