// import React, { useEffect, useRef, useMemo, useState } from "react";
// import { Chart } from "chart.js/auto";
// import { useThemeStore } from "../../../../store/useThemeStore";
// import io from "socket.io-client";
// import { Pie } from 'react-chartjs-2';
// import useChartStore from "../../../../store/useChartStore";

// // WebSocket Connection
// // const socket = io("http://localhost:5000"); // Adjust to your backend URL

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

// const PieChartComponent = ({
//   type,
//   title,
//   fontFamily,
//   fontSize,
//   fontWeight = "Regular",
//   data,
// }: ChartComponentProps) => {
//   const canvasRef = useRef<HTMLCanvasElement>(null);
//   const { themeColor } = useThemeStore();
//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
//     labels: [],
//     datasets: [],
//   });

//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

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

//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
//     const buttonActionColor = useMemo(
//       () => themeColor[0] || "#6f42c1",
//       [themeColor]
//     );
//     const buttonAbortColor = useMemo(
//       () => themeColor[1] || "#ffffff",
//       [themeColor]
//     );

//     // 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]
//     );

//     // Memoize Chart Data
//     // const data = useMemo(() => propsData, [propsData]);

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

//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();

//   useEffect(() => {

//     const socket = io(`http://${iotApiUrl}`);

//     if ( measurements.length > 0 ) {
//       var inputes = {
//         measurements: measurements,
//         duration: duration,
//         interval: 1000,
//       }

//     // Start stream
//     const startStream = () => {
//       socket.emit("lineInput", inputes);
//     }

//     socket.on('connect', startStream);

//     socket.on("lineOutput", (response) => {
//       const responceData = response.data;
//       console.log("Received data:", responceData);

//       // Extract timestamps and values
//       const labels = responceData.time;
//       const datasets = measurements.map((measurement: any) => {
//         const key = `${measurement.name}.${measurement.fields}`;
//         return {
//           label: key,
//           data: responceData[key]?.values ?? [], // Ensure it exists
//           backgroundColor: "#6f42c1",
//           borderColor: "#ffffff",
//         };
//       });

//       setChartData({ labels, datasets });
//     });
//     }

//     return () => {
//       socket.off("lineOutput");
//       socket.emit("stop_stream"); // Stop streaming when component unmounts
//     };
//   }, [measurements, duration]);

//   // useEffect(() => {
//   //   if (!canvasRef.current) return;
//   //   const ctx = canvasRef.current.getContext("2d");
//   //   if (!ctx) return;

//   //   const chart = new Chart(ctx, {
//   //     type,
//   //     data: chartData,
//   //     options: options,
//   //   });

//   //   return () => chart.destroy();
//   // }, [chartData, type, title]);

//   return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
// };

// export default PieChartComponent;

import React, { useEffect, useMemo, useState } from "react";
import { Pie } from "react-chartjs-2";
import io from "socket.io-client";

import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";

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

const PieChartComponent = ({
  id,
  type,
  title,
  fontFamily,
  fontSize,
  fontWeight = "Regular",
}: ChartComponentProps) => {
  const { themeColor } = useThemeStore();
  const {
    measurements: chartMeasurements,
    duration: chartDuration,
    name: widgetName,
  } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h");
  const [name, setName] = useState("Widget");
  const [chartData, setChartData] = useState<{
    labels: string[];
    datasets: any[];
  }>({
    labels: [],
    datasets: [],
  });
  const { selectedChartId } = useWidgetStore();

  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0];
  const defaultData = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "Dataset",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["#6f42c1"],
        borderColor: "#b392f0",
        borderWidth: 1,
      },
    ],
  };

  useEffect(() => {}, []);

  // Memoize Theme Colors
  const buttonActionColor = useMemo(
    () => themeColor[0] || "#5c87df",
    [themeColor]
  );
  const buttonAbortColor = useMemo(
    () => themeColor[1] || "#ffffff",
    [themeColor]
  );

  // Memoize Font Styling
  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]
  );

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

  // useEffect(() => {console.log(measurements);
  // },[measurements])

  useEffect(() => {
    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
      return;

    const socket = io(`http://${iotApiUrl}`);

    const inputData = {
      measurements,
      duration,
      interval: 1000,
    };

    const startStream = () => {
      socket.emit("lineInput", inputData);
    };

    socket.on("connect", startStream);

    socket.on("lineOutput", (response) => {
      const responseData = response.data;

      // Extract timestamps and values
      const labels = responseData.time;
      const datasets = Object.keys(measurements).map((key) => {
        const measurement = measurements[key];
        const datasetKey = `${measurement.name}.${measurement.fields}`;
        return {
          label: datasetKey,
          data: responseData[datasetKey]?.values ?? [],
          backgroundColor: "#6f42c1",
          borderColor: "#b392f0",
          borderWidth: 1,
        };
      });

      setChartData({ labels, datasets });
    });

    return () => {
      socket.off("lineOutput");
      socket.emit("stop_stream"); // Stop streaming when component unmounts
      socket.disconnect();
    };
  }, [measurements, duration, iotApiUrl]);

  const fetchSavedInputes = async () => {
    if (id !== "") {
      try {
        const response = await axios.get(
          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
        );
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements);
          setDuration(response.data.Data.duration);
          setName(response.data.widgetName);
        } else {
          console.log("Unexpected response:", response);
        }
      } catch (error) {
        console.error("There was an error!", error);
      }
    }
  };

  useEffect(() => {
    fetchSavedInputes();
  }, []);

  useEffect(() => {
    if (selectedChartId?.id === id) {
      fetchSavedInputes();
    }
  }, [chartMeasurements, chartDuration, widgetName]);

  return (
    <Pie
      data={Object.keys(measurements).length > 0 ? chartData : defaultData}
      options={options}
    />
  );
};

export default PieChartComponent;