import { useWidgetStore } from "../../../store/useWidgetStore";
import ProgressCard from "../realTimeVis/charts/ProgressCard";
import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";

export const DraggableWidget = ({
  widget,
  hiddenPanels, // Add this prop to track hidden panels
}: {
  widget: any;
  hiddenPanels: string[]; // Array of hidden panel names
}) => {
  console.log("widget: ", widget.type);
  const { selectedChartId, setSelectedChartId } = useWidgetStore();

  const handlePointerDown = () => {
    if (selectedChartId?.id !== widget.id) {
      setSelectedChartId(widget);
    }
  };

  // Determine if the widget's panel is hidden
  const isPanelHidden = hiddenPanels.includes(widget.panel);

  return (
    <>
      <div
        key={widget.id}
        className={`chart-container ${
          selectedChartId?.id === widget.id && "activeChart"
        }`}
        onPointerDown={handlePointerDown}
        style={{
          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
        }}
      >
        {/* Render charts based on widget type */}
        {widget.type === "progress" && (
          <ProgressCard title={widget.title} data={widget.data} />
        )}
        {widget.type === "line" && (
          <LineGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={{
              measurements: [
                { name: "testDevice", fields: "powerConsumption" },
                { name: "furnace", fields: "powerConsumption" },
              ],
              interval: 1000,
              duration: "1h",
            }}
          />
        )}
        {widget.type === "bar" && (
          <BarGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={{
              measurements: [
                { name: "testDevice", fields: "powerConsumption" },
                { name: "furnace", fields: "powerConsumption" },
              ],
              interval: 1000,
              duration: "1h",
            }}
          />
        )}
        {/* {widget.type === "radar" && (
          <RadarGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={widget.data.measurements.map((item: any) => item.fields)}
          />
        )} */}
        {widget.type === "pie" && (
          <PieGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={{
              measurements: [
                { name: "testDevice", fields: "powerConsumption" },
                { name: "furnace", fields: "powerConsumption" },
              ],
              interval: 1000,
              duration: "1h",
            }}
          />
        )}
        {widget.type === "doughnut" && (
          <DoughnutGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={{
              measurements: [
                { name: "testDevice", fields: "powerConsumption" },
                { name: "furnace", fields: "powerConsumption" },
              ],
              interval: 1000,
              duration: "1h",
            }}
          />
        )}
        {widget.type === "polarArea" && (
          <PolarAreaGraphComponent
            type={widget.type}
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
            data={{
              measurements: [
                { name: "testDevice", fields: "powerConsumption" },
                { name: "furnace", fields: "powerConsumption" },
              ],
              interval: 1000,
              duration: "1h",
            }}
          />
        )}
      </div>
    </>
  );
};