import React, { useMemo } from "react";
import { Radar } from "react-chartjs-2";
import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";

interface ChartComponentProps {
  type: string;
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: "Light" | "Regular" | "Bold";
  data: number[]; // Expecting an array of numbers for radar chart data
}

const RadarGraphComponent = ({
  title,
  fontFamily,
  fontSize,
  fontWeight = "Regular",
  data, // Now guaranteed to be number[]
}: ChartComponentProps) => {
  // Memoize Font Weight Mapping
  const chartFontWeightMap = useMemo(
    () => ({
      Light: "lighter" as const,
      Regular: "normal" as const,
      Bold: "bold" as const,
    }),
    []
  );

  const fontSizeValue = useMemo(
    () => (fontSize ? parseInt(fontSize) : 12),
    [fontSize]
  );

  const fontWeightValue = useMemo(
    () => chartFontWeightMap[fontWeight],
    [fontWeight, chartFontWeightMap]
  );

  const chartFontStyle = useMemo(
    () => ({
      family: fontFamily || "Arial",
      size: fontSizeValue,
      weight: fontWeightValue,
    }),
    [fontFamily, fontSizeValue, fontWeightValue]
  );

  const options: ChartOptions<"radar"> = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: title,
          font: chartFontStyle,
        },
        legend: {
          display: false,
          position: "top",
        },
      },
      scales: {
        r: {
          min: 0,
          max: 100,
          angleLines: {
            display: true,
          },
          ticks: {
            display: true,
            stepSize: 20,
          },
        } as RadialLinearScaleOptions,
      },
    }),
    [title, chartFontStyle]
  );

  const chartData: ChartData<"radar"> = useMemo(
    () => ({
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "Dataset 1",
          data, // Use the data passed as a prop
          backgroundColor: "rgba(111, 66, 193, 0.2)",
          borderColor: "#6f42c1",
          borderWidth: 2,
          fill: true,
        },
      ],
    }),
    [data]
  );

  return <Radar data={chartData} options={options} />;
};

export default RadarGraphComponent;