// =================================================================================================
import React from "react";
import { MenuOptions } from "../Data/Menu";

const Sidebar = ({ onAddNodeCallback }) => {
  // const onDragStart = (event, nodeType) => {
  //     event.dataTransfer.setData("application/reactflow", nodeType);
  // };
  const onDragStart = (event, nodeType) => {
    // event.dataTransfer.setData("application/reactflow", "custom"); // Set a custom dataTransfer type
    event.dataTransfer.setData("nodeType", nodeType); // Store the node type in a custom data attribute
  };

  return (
    <div className="menu-fixed">
      {MenuOptions.map((option) => (
        <div className="item-flow" key={option.option}>
          <b>{option.title}</b>
          <div
            className={`list-option ${option.option == "rule" ? "flex" : ""}`}
          >
            {option.list_option.map((items) => (
              <div
                className="items"
                draggable="true"
                key={items.id}
                onDragStart={(event) => onDragStart(event, items.key)}
              >
                <div className="step">
                  <div className="left">
                    <img src={items.icon} width="24px" height="24px" alt="" />
                  </div>
                  <div className="right">{items.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Sidebar;
