import React from "react";
import {
  CartIcon,
  DocumentIcon,
  GlobeIcon,
  WalletIcon,
} from "../../../../icons/3dChartIcons";
import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";

import WarehouseThroughput from "../../../../../modules/visualization/widgets/floating/cards/WarehouseThroughput";
import ProductivityDashboard from "../../../../../modules/visualization/widgets/floating/cards/ProductivityDashboard";
import FleetEfficiency from "../../../../../modules/visualization/widgets/floating/cards/FleetEfficiency";

interface Widget {
  id: string;
  name: string;
}

const WidgetsFloating = () => {
  // const [widgets, setWidgets] = useState<Widget[]>([
  //   { id: "1", name: "Working State Widget" },
  //   { id: "2", name: "Floating Widget 2" },
  //   { id: "3", name: "Floating Widget 3" },
  //   { id: "4", name: "Floating Widget 4" },
  // ]);

  // Function to handle drag start
  const handleDragStart = (
    e: React.DragEvent<HTMLDivElement>,
    widget: Widget
  ) => {
    e.dataTransfer.setData("application/json", JSON.stringify(widget));
  };

  return (
    <div className="floatingWidgets-wrapper widgets-wrapper">
      {/* {widgets.map((widget) => (
        <div
          key={widget.id}
          className="floating"
          draggable
          onDragStart={(e) => handleDragStart(e, widget)}
        >
          {widget.name}
        </div>
      ))} */}
      {/* Floating 1 */}
      <SimpleCard
        header={"Today’s Earnings"}
        icon={WalletIcon}
        iconName={"WalletIcon"}
        value={"$53,000"}
        per={"+55%"}
      />
      <SimpleCard
        header={"Today’s Users"}
        icon={GlobeIcon}
        iconName={"GlobeIcon"}
        value={"1,200"}
        per={"+30%"}
      />
      <SimpleCard
        header={"New Clients"}
        icon={DocumentIcon}
        iconName={"DocumentIcon"}
        value={"250"}
        per={"+12%"}
      />
      <SimpleCard
        header={"Total Sales"}
        icon={CartIcon}
        iconName={"CartIcon"}
        value={"$150,000"}
        per={"+20%"}
      />{" "}
      <WarehouseThroughput />
      {/* <ProductivityDashboard /> */}
      <FleetEfficiency />
    </div>
  );
};

export default WidgetsFloating;