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

// This demo also loads: https://apexcharts.com/samples/assets/github-data.js

// The commit history asset ends in 2018; shift every point forward 8 years
// so the demo lands in 2020-2026 without editing the asset.
var SHIFT = 8 * 365.25 * 24 * 60 * 60 * 1000
var commitSeries = githubdata.series.map(function (p) {
  return { x: p.x + SHIFT, y: p.y }
})

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'commits',
        data: commitSeries,
      },
    ],
    options: {
      chart: {
        id: 'chartyear',
        type: 'area',
        height: 180,
        background: '#F6F8FA',
        toolbar: {
          show: false,
          autoSelected: 'pan',
        },
        events: {
          mounted: function (chart) {
            var commitsEl = document.querySelector('.cmeta span.commits')
            var commits = chart.getSeriesTotalXRange(
              chart.w.globals.minX,
              chart.w.globals.maxX,
            )

            commitsEl.innerHTML = commits
          },
          updated: function (chart) {
            var commitsEl = document.querySelector('.cmeta span.commits')
            var commits = chart.getSeriesTotalXRange(
              chart.w.globals.minX,
              chart.w.globals.maxX,
            )

            commitsEl.innerHTML = commits
          },
        },
      },
      colors: ['#FF7F00'],
      stroke: {
        width: 0,
        curve: 'monotoneCubic',
      },
      dataLabels: {
        enabled: false,
      },
      fill: {
        opacity: 1,
        type: 'solid',
      },
      yaxis: {
        show: true,
        forceNiceScale: true,
      },
      xaxis: {
        type: 'datetime',
      },
    },
    seriesYears: [
      {
        name: 'commits',
        data: commitSeries,
      },
    ],
    optionsYears: {
      chart: {
        height: 150,
        type: 'area',
        background: '#F6F8FA',
        toolbar: {
          autoSelected: 'selection',
        },
        brush: {
          enabled: true,
          target: 'chartyear',
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('15 Feb 2024').getTime(),
            max: new Date('14 Feb 2025').getTime(),
          },
        },
      },
      colors: ['#7BD39A'],
      dataLabels: {
        enabled: false,
      },
      stroke: {
        width: 0,
        curve: 'monotoneCubic',
      },
      fill: {
        opacity: 1,
        type: 'solid',
      },
      legend: {
        position: 'top',
        horizontalAlign: 'left',
      },
      xaxis: {
        type: 'datetime',
      },
    },
  })

  return (
    <div>
      <div id="wrapper">
        <div id="chart-months">
          <ReactApexChart
            options={state.options}
            series={state.series}
            type="area"
            height={180}
          />
        </div>

        <h5 className="github-style">
          <div className="userimg">C</div>
          <div className="userdetails">
            <a className="username">coder</a>
            <span className="cmeta">
              <span className="commits"></span> commits
            </span>
          </div>
        </h5>

        <div id="chart-years">
          <ReactApexChart
            options={state.optionsYears}
            series={state.seriesYears}
            type="area"
            height={150}
          />
        </div>
      </div>
    </div>
  )
}

export default ApexChart