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 DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
import {
  DeleteIcon,
  DublicateIcon,
  KebabIcon,
} from "../../icons/ExportCommonIcons";
import { useEffect, useRef } from "react";

type Side = "top" | "bottom" | "left" | "right";

interface Widget {
  id: string;
  type: string;
  title: string;
  panel: Side;
  data: any;
}

export const DraggableWidget = ({
  widget,
  hiddenPanels, // Add this prop to track hidden panels
  index,
  onReorder,
  openKebabId,
  setOpenKebabId,
  selectedZone,
  setSelectedZone,
}: {
  selectedZone: {
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
    lockedPanels: Side[];
    widgets: Widget[];
  };
  setSelectedZone: React.Dispatch<
    React.SetStateAction<{
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
      widgets: Widget[];
    }>
  >;
  widget: any;
  hiddenPanels: string[]; // Array of hidden panel names
  index: number;
  onReorder: (fromIndex: number, toIndex: number) => void;
  openKebabId: string | null; // ID of the widget with an open kebab menu
  setOpenKebabId: (id: string | null) => void; // Function to update the open kebab menu
}) => {
  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
    }
  };
  // Handle kebab icon click to toggle kebab options
  const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation(); // Prevent click from propagating to parent elements
    if (openKebabId === widget.id) {
      // If the current kebab is already open, close it
      setOpenKebabId(null);
    } else {
      // Open the kebab for the clicked widget and close others
      setOpenKebabId(widget.id);
    }
  };

  const deleteSelectedChart = () => {
    // Filter out the widget to be deleted
    const updatedWidgets = selectedZone.widgets.filter(
      (w: Widget) => w.id !== widget.id
    );

    // Update the selectedZone state
    setSelectedZone((prevZone: any) => ({
      ...prevZone,
      widgets: updatedWidgets, // Replace the widgets array with the updated one
    }));

    // Close the kebab menu after deletion
    setOpenKebabId(null);
  };
  const widgetRef = useRef<HTMLDivElement | null>(null);

  // Handle click outside to close the kebab menu
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        widgetRef.current &&
        !widgetRef.current.contains(event.target as Node)
      ) {
        setOpenKebabId(null); // Close the kebab menu if the click is outside
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    // Cleanup event listener on component unmount
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [setOpenKebabId]);


  const duplicateWidget = () => {
    // Create a copy of the current widget with a new unique ID
    const duplicatedWidget: Widget = {
      ...widget,
      id: `${widget.id}-copy-${Date.now()}`, // Generate a unique ID using a timestamp
    };
  
    // Add the duplicated widget to the selectedZone's widgets array
    setSelectedZone((prevZone: any) => ({
      ...prevZone,
      widgets: [...prevZone.widgets, duplicatedWidget],
    }));
  
    // Close the kebab menu after duplication
    setOpenKebabId(null);
  
    console.log("Duplicated widget with ID:", duplicatedWidget.id);
  };

  
  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
        }}
      >
        {/* Kebab Icon */}
        <div className="icon kebab" onClick={handleKebabClick}>
          <KebabIcon />
        </div>

        {/* Kebab Options */}
        {openKebabId === widget.id && (
          <div
            className="kebab-options"
            ref={widgetRef} // Attach the ref to the widget container
          >
            <div className="edit btn">
              <div className="icon">
                <DublicateIcon />
              </div>
              <div className="label">Duplicate</div>
            </div>
            <div className="edit btn" onClick={deleteSelectedChart}>
              <div className="icon">
                <DeleteIcon />
              </div>
              <div className="label">Delete</div>
            </div>
          </div>
        )}

        {/* 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>
    </>
  );
};