import { useMemo } from "react";
import { Line, PolarArea } from "react-chartjs-2";

interface ChartComponentProps {
  type: any;
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: "Light" | "Regular" | "Bold";
  data: any;
}

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

  // Parse and Memoize Font Size
  const fontSizeValue = useMemo(
    () => (fontSize ? parseInt(fontSize) : 12),
    [fontSize]
  );

  // Determine and Memoize Font Weight
  const fontWeightValue = useMemo(
    () => chartFontWeightMap[fontWeight],
    [fontWeight, chartFontWeightMap]
  );

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

  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: title,
          font: chartFontStyle,
        },
        legend: {
          display: false,
        },
      },
      scales: {
        x: {
          ticks: {
            display: false, // This hides the x-axis labels
          },
        },
      },
    }),
    [title, chartFontStyle]
  );

  const chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "My First Dataset",
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
        borderColor: "#ffffff", // Keeping border color white
        borderWidth: 2,
        fill: false,
      },
    ],
  };

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

export default PolarAreaGraphComponent;