// @ts-nocheck
/* eslint-disable */
// chartjs type hell
import "chartjs-adapter-luxon";
import { useRef } from "react";
import { Chart } from "react-chartjs-2";

import type { ChartData } from "~/interfaces/simulator";

import {
  CategoryScale,
  Chart as ChartJS,
  Filler,
  Legend,
  LineElement,
  LineController,
  LinearScale,
  PointElement,
  TimeScale,
  Title,
  Tooltip,
} from "chart.js";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  LineController,
  Title,
  Tooltip,
  Legend,
  Filler,
  TimeScale
);

const options = {
  responsive: true,
  elements: {
    point: {
      radius: 0,
    },
    line: {
      cubicInterpolationMode: "monotone",
    },
  },
  scales: {
    x: {
      type: "time",
      time: {
        // Luxon format string
        unit: "week",
        tooltipFormat: "DD",
      },
      title: {
        display: true,
        text: "Periodo",
      },
      adapters: {
        date: {
          setZone: true,
          zone: "utc",
        },
      },
      grid: {
        display: false,
      },
    },
    y: {
      ticks: {
        // Include a dollar sign in the ticks
        callback: function (value: string) {
          return value + "%";
        },
      },
      grid: {
        display: false,
      },
    },
  },
  interaction: {
    mode: "nearest",
    axis: "x",
    intersect: false,
  },
  plugins: {
    legend: {
      display: false,
      position: "top" as const,
    },
    tooltip: {
      callbacks: {
        label: (context) => {
          let label: string = context.dataset.label || "";

          if (label) {
            label += ": ";
          }
          if (context.parsed.y !== null) {
            //label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
            label += `${parseFloat(context.parsed.y).toFixed(2)}%`;
          }
          return label;
        },
      },
    },
  },
};

interface ChartsProps {
  chartData: ChartData;
}

export default function Charts({ chartData }: ChartsProps) {
  const chartRef = useRef();
  return (
    <>
      {chartData.labels.length > 0 && (
        <>
          <Chart
            ref={chartRef}
            type='line'
            options={options}
            data={chartData}
          />
        </>
      )}
    </>
  );
}