"use client";

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { ApexOptions } from "apexcharts";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

interface ChartState {
  series: {
    name: string;
    data: number[];
  }[];
  options: ApexOptions;
}

const ApexChart = () => {
  const [state, setState] = useState<ChartState | null>(null);

  useEffect(() => {
    const initialState: ChartState = {
      series: [
        {
          name: "Sales",
          data: [
            182, 192, 230, 198, 243, 234, 244, 210, 274, 220, 225, 289, 265,
            304,
          ],
        },
      ],
      options: {
        chart: {
          toolbar: { show: false },
          height: 350,
          type: "line",
        },
        forecastDataPoints: {
          count: 0,
        },
        stroke: {
          width: 6,
          curve: "smooth",
        },
        fill: {
          type: "gradient",
          gradient: {
            shade: "dark",
            type: "horizontal",
            shadeIntensity: 0.5,
            gradientToColors: ["#99DDE5"],
            inverseColors: false,
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100],
          },
        },
        colors: ["#0164FF"],
        xaxis: {
          type: "datetime",
          categories: [
            "1/11/2024",
            "2/11/2024",
            "3/11/2024",
            "5/11/2024",
            "6/11/2024",
            "7/11/2024",
            "8/11/2024",
            "9/11/2024",
            "10/11/2024",
            "11/11/2024",
            "12/11/2024",
            "1/11/2025",
            "2/11/2025",
            "3/11/2025",
          ],
          tickAmount: 0,
          labels: {
            formatter: function (value: any, timestamp: any, opts: any) {
              return opts.dateFormatter(new Date(timestamp), "dd MMM");
            },
          },
        },
      },
    };
    setState(initialState);
  }, []);

  if (!state) {
    return <div>Loading...</div>;
  }

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

export default ApexChart;