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

// quarter label from a 'YYYY/MM/DD' date string, no external date library
function quarterOf(val) {
  return Math.floor(new Date(val).getMonth() / 3) + 1
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Revenue',
        data: [
          {
            x: '2024/01/01',
            y: 400,
          },
          {
            x: '2024/04/01',
            y: 430,
          },
          {
            x: '2024/07/01',
            y: 448,
          },
          {
            x: '2024/10/01',
            y: 470,
          },
          {
            x: '2025/01/01',
            y: 540,
          },
          {
            x: '2025/04/01',
            y: 580,
          },
          {
            x: '2025/07/01',
            y: 690,
          },
          {
            x: '2025/10/01',
            y: 690,
          },
        ],
      },
    ],
    options: {
      chart: {
        type: 'bar',
        height: 380,
      },
      xaxis: {
        type: 'category',
        labels: {
          formatter: function (val) {
            return 'Q' + quarterOf(val)
          },
        },
        group: {
          style: {
            fontSize: '10px',
            fontWeight: 700,
          },
          groups: [
            { title: '2024', cols: 4 },
            { title: '2025', cols: 4 },
          ],
        },
      },
      title: {
        text: 'Quarterly Revenue',
      },
      yaxis: {
        labels: {
          formatter: function (val) {
            return '$' + val + 'k'
          },
        },
      },
      tooltip: {
        x: {
          formatter: function (val) {
            return 'Q' + quarterOf(val) + ' ' + new Date(val).getFullYear()
          },
        },
      },
    },
  })

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

export default ApexChart