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

// This demo also loads: https://apexcharts.com/samples/assets/stock-prices.js

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Price',
        data: series.monthDataSeries1.prices,
      },
    ],
    options: {
      chart: {
        height: 350,
        type: 'line',
        id: 'annotation-tooltips',
      },
      annotations: {
        points: [
          {
            x: new Date('17 Nov 2025').getTime(),
            y: 8340.7,
            marker: {
              size: 7,
              fillColor: '#00E396',
              strokeColor: '#fff',
              strokeWidth: 2,
            },
            label: {
              borderColor: '#00E396',
              style: {
                color: '#fff',
                background: '#00E396',
              },
              text: 'Breakout',
            },
            // Static HTML content. Keep the on-chart label short and move the
            // detail into the tooltip, which appears on hover.
            tooltip: {
              enabled: true,
              text:
                '<strong style="color:#00E396;">Breakout above resistance</strong>' +
                '<div style="margin-top:4px;">Close: <b>8,340.70</b> (+2.1%)</div>' +
                '<div>Volume: 2.4M &middot; 1.7&times; average</div>' +
                '<div>RSI: 68 &middot; nearing overbought</div>',
            },
          },
          {
            x: new Date('28 Nov 2025').getTime(),
            y: 8626.2,
            marker: {
              size: 7,
              fillColor: '#775DD0',
              strokeColor: '#fff',
              strokeWidth: 2,
            },
            label: {
              borderColor: '#775DD0',
              style: {
                color: '#fff',
                background: '#775DD0',
              },
              text: 'Earnings',
            },
            // A per-annotation dark theme, independent of the global tooltip theme.
            tooltip: {
              enabled: true,
              theme: 'dark',
              text:
                '<strong>Q3 earnings beat</strong>' +
                '<div style="margin-top:4px;">EPS: <b>$1.42</b> vs $1.28 est.</div>' +
                '<div>Revenue: <b>$4.7B</b> (+18% YoY)</div>' +
                '<div>Full-year guidance raised</div>',
            },
          },
          {
            x: new Date('08 Dec 2025').getTime(),
            y: 9340.85,
            marker: {
              size: 7,
              fillColor: '#FF4560',
              strokeColor: '#fff',
              strokeWidth: 2,
            },
            label: {
              borderColor: '#FF4560',
              // Nudge left so the label clears the right edge at the final point.
              offsetX: -34,
              style: {
                color: '#fff',
                background: '#FF4560',
              },
              text: 'All-time high',
            },
            // A formatter receives the annotation so the content can be built from
            // its data (here, the y-value). Takes precedence over `text`.
            tooltip: {
              enabled: true,
              formatter: function ({ annotation }) {
                return (
                  '<strong style="color:#FF4560;">New all-time high</strong>' +
                  '<div style="margin-top:4px;">Price: <b>' +
                  annotation.y.toLocaleString() +
                  '</b></div>' +
                  '<div>+15.2% since the Nov 13 low</div>' +
                  '<div>Consensus rating: <b>Overweight</b></div>'
                )
              },
            },
          },
        ],
      },
      dataLabels: {
        enabled: false,
      },
      // Turn off the series tooltip so the annotation tooltips are the sole focus.
      tooltip: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
        width: 3,
      },
      grid: {
        padding: {
          right: 40,
          left: 20,
        },
      },
      title: {
        text: 'Annotations with Tooltips',
        align: 'left',
      },
      subtitle: {
        text: 'Hover the markers to reveal the full details',
        align: 'left',
      },
      labels: series.monthDataSeries1.dates.map(function (d) {
        return d.replace('2017', '2025')
      }),
      xaxis: {
        type: 'datetime',
      },
    },
  })

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

export default ApexChart