import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
import widget3 from "../../../../../assets/image/3D/StateWorking.png";
import widget4 from "../../../../../assets/image/3D/Throughput.png";
import { useAsset3dWidget } from "../../../../../store/store";
const Widgets3D = () => {
  const widgets = [
    { name: "Widget 1", img: widget1 },
    { name: "Widget 2", img: widget2 },
    { name: "Widget 3", img: widget3 },
    { name: "Widget 4", img: widget4 },
  ];
  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();


  return (
    <div className="widgets-container widget3D">
      {widgets?.map((widget, index) => (
        <div
          key={index}
          className="widget-item"
          draggable
          onDragStart={(e) => {
            let crt = e.target
            if (crt instanceof HTMLElement) {
              const widget = crt.cloneNode(true) as HTMLElement;
              console.log('widget: ', widget);
              e.dataTransfer.setDragImage(widget,0,0)
              e.dataTransfer.effectAllowed="move"
            }
          }}
          onPointerDown={() => {
            setWidgetSelect("ui-" + widget.name);
          }}
          onPointerUp={() => {
            setWidgetSelect(""); // Clearing selection correctly
          }}
        >
          {/* <div className="widget-name">{widget.name}</div> */}
          <img
            className="widget-image"
            src={widget.img}
            alt={widget.name}
            // draggable={false}
          />
        </div>
      ))}
    </div>
  );
};

export default Widgets3D;