Dwinzo_dev/app/src/components/ui/componets/DraggableWidget.tsx

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
  index, onReorder
}: {
  widget: any;
  hiddenPanels: string[]; // Array of hidden panel names
  index: number; onReorder: (fromIndex: number, toIndex: number) => void
}) => {

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

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
  };
  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault(); // Allow drop
  };

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault(); // Allow drop
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
    const toIndex = index; // The index of the widget where the drop occurred
    if (fromIndex !== toIndex) {
      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
    }
  };


  return (
    <>
      <div
        draggable
        key={widget.id}
        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
          }`}
        onPointerDown={handlePointerDown}
        onDragStart={handleDragStart}
        onDragEnter={handleDragEnter}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        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>
    </>
  );
};