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

// Deterministic daily data: a random walk with weekly seasonality for order
// counts, and correlated revenue so brushing either series stays meaningful.
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
  }
}

// Mean-reverting random walk: wanders organically around ~300 with occasional
// jumps, so the line looks like real order data rather than a smooth wave.
var rand = mulberry32(42)
var data1 = []
var data2 = []
var ts = new Date('01 Oct 2024').getTime()
var level = 300

for (var i = 0; i < 180; i++) {
  level += (rand() - 0.5) * 55
  level += (300 - level) * 0.03
  if (rand() > 0.94) level += (rand() - 0.5) * 90
  if (level < 120) level = 120
  var orders = Math.round(level)
  data1.push([ts, orders])
  data2.push([ts, Math.round(orders * (0.32 + rand() * 0.12) * 10) / 10])
  ts += 86400000
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Orders',
        data: data1,
      },
      {
        name: 'Revenue',
        data: data2,
      },
    ],
    options: {
      chart: {
        id: 'chart2',
        type: 'line',
        height: 230,
        toolbar: {
          autoSelected: 'pan',
          show: false,
        },
      },
      title: {
        text: 'Daily Orders & Revenue',
        align: 'left',
      },
      colors: ['#008FFB', '#00E396'],
      dataLabels: {
        enabled: false,
      },
      stroke: {
        width: [2, 4],
        curve: ['straight', 'monotoneCubic'],
      },
      fill: {
        opacity: [1, 0.75],
      },
      markers: {
        size: 0,
      },
      yaxis: [
        {
          seriesName: 'Orders',
          axisTicks: {
            show: true,
            color: '#008FFB',
          },
          axisBorder: {
            show: true,
            color: '#008FFB',
          },
          labels: {
            style: {
              colors: '#008FFB',
            },
          },
          title: {
            text: 'Orders',
            style: {
              color: '#008FFB',
            },
          },
        },
        {
          seriesName: 'Revenue',
          opposite: true,
          axisTicks: {
            show: true,
            color: '#00E396',
          },
          axisBorder: {
            show: true,
            color: '#00E396',
          },
          labels: {
            style: {
              colors: '#00E396',
            },
          },
          title: {
            text: 'Revenue ($k)',
            style: {
              color: '#00E396',
            },
          },
        },
      ],
      xaxis: {
        type: 'datetime',
      },
    },
    seriesLine: [
      {
        name: 'Orders',
        data: data1,
      },
      {
        name: 'Revenue',
        data: data2,
      },
    ],
    optionsLine: {
      chart: {
        id: 'chart1',
        height: 130,
        type: 'area',
        brush: {
          target: 'chart2',
          enabled: true,
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('05 Jan 2025').getTime(),
            max: new Date('10 Feb 2025').getTime(),
          },
        },
      },
      colors: ['#008FFB', '#00E396'],
      stroke: {
        width: [1, 3],
        curve: ['straight', 'monotoneCubic'],
      },
      fill: {
        type: 'gradient',
        gradient: {
          opacityFrom: 0.91,
          opacityTo: 0.1,
        },
      },
      xaxis: {
        type: 'datetime',
        tooltip: {
          enabled: false,
        },
      },
      yaxis: {
        tickAmount: 2,
      },
    },
  })

  return (
    <div>
      <div id="wrapper">
        <div id="chart-line2">
          <ReactApexChart
            options={state.options}
            series={state.series}
            type="line"
            height={230}
          />
        </div>
        <div id="chart-line">
          <ReactApexChart
            options={state.optionsLine}
            series={state.seriesLine}
            type="area"
            height={130}
          />
        </div>
      </div>
    </div>
  )
}

export default ApexChart