import React, { useEffect } from 'react';
import { Menu, Dropdown } from '@arco-design/web-react';
import { Node } from '@xyflow/react';

interface NodeContextMenuProps {
  node: Node;
  onRename?: (node: Node) => void;
  onDelete?: (node: Node) => void;
  onCopy?: (node: Node) => void;
  onEdit?: (node: Node) => void;
  onCloseMenu?: (data: React.Dispatch<React.SetStateAction<any>>) => void;
  onCloseOpenModal?: (boolean: boolean) => void;
}

const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
                                                           node,
                                                           onDelete,
                                                           onCopy,
                                                           onEdit,
                                                           onCloseMenu,
                                                           onCloseOpenModal
                                                         }) => {
  const handleDelete = () => {
    onDelete && onDelete(node);
    onCloseOpenModal(false);
    onCloseMenu(null);
  };

  const handleCopy = () => {
    onCopy && onCopy(node);
    onCloseOpenModal(false);
    onCloseMenu(null);
  };

  const handleEdit = () => {
    onEdit && onEdit(node);
    onCloseOpenModal(false);
    onCloseMenu(null);
  };

  return (
    <Menu>
      <Menu.Item key="edit" onClick={handleEdit}>
        编辑节点
      </Menu.Item>

      {(!['start', 'end'].includes(node?.type)) && (
        <>
          <Menu.Item key="copy" onClick={handleCopy}>
            复制节点
          </Menu.Item>
          <Menu.Item key="delete" onClick={handleDelete}>
            删除节点
          </Menu.Item>
        </>
      )}
    </Menu>
  );
};

export default NodeContextMenu;