import React from 'react';
import { Menu } from '@arco-design/web-react';
import { Edge } from '@xyflow/react';

interface EdgeContextMenuProps {
  edge: Edge;
  onDelete?: (edge: Edge) => void;
  onEdit?: (edge: Edge) => void;
  onAddNode?: (edge: Edge) => void; // 添加在边上添加节点的功能
}

const EdgeContextMenu: React.FC<EdgeContextMenuProps> = ({
  edge,
  onDelete,
  onEdit,
  onAddNode
}) => {
  const handleDelete = () => {
    onDelete && onDelete(edge);
  };

  const handleEdit = () => {
    onEdit && onEdit(edge);
  };

  // 添加在边上添加节点的处理函数
  const handleAddNode = () => {
    onAddNode && onAddNode(edge);
  };

  return (
    <Menu
      style={{
        border: '1px solid #e4e7ed',
        borderRadius: 4,
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
      }}
    >
      <Menu.Item key="add-node" onClick={handleAddNode}>
        添加节点
      </Menu.Item>
      <Menu.Item key="edit" onClick={handleEdit}>
        编辑连接
      </Menu.Item>
      <Menu.Item key="delete" onClick={handleDelete}>
        删除连接
      </Menu.Item>
    </Menu>
  );
};

export default EdgeContextMenu;