import { useMemo } from "react";
import { Pie } from "react-chartjs-2";

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

const PieChartComponent = ({
  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]
  );

  // Access the CSS variable for the primary accent color
  const accentColor = getComputedStyle(document.documentElement)
    .getPropertyValue("--accent-color")
    .trim();

  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: title,
          font: chartFontStyle,
        },
        legend: {
          display: false,
        },
      },
    }),
    [title, chartFontStyle]
  );

  const chartData = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "Dataset",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["#6f42c1"],
        borderColor: "#ffffff",
        borderWidth: 2,
      },
    ],
  };

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

export default PieChartComponent;