import React, { useEffect } from 'react';
import { Menu, Message } from '@arco-design/web-react';
import { Node } from '@xyflow/react';
import { isJSON } from '@/utils/common';

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 = () => {
    // 判断节点类型，如果是SUB类型则打开新标签页
    if (node.type === 'SUB') {
      // 创建自定义事件来通知打开新标签页
      const customDef = isJSON((node as any).data.component.customDef) ? JSON.parse((node as any).data.component.customDef) : {};
      if (Object.keys(customDef).length === 0) {
        Message.warning('新导入的复合组件请保存后再进行编辑！');
      }
      const openTabEvent = new CustomEvent('openSubNodeTab', {
        detail: { node }
      });
      document.dispatchEvent(openTabEvent);
    }
    else {
      onEdit && onEdit(node);
      onCloseOpenModal(true);
    }
    onCloseMenu(null);
  };


  // 根据节点类型和其他条件动态生成菜单项
  const renderMenuItems = () => {
    const menuItems = [];
    // if (!useDefault) return;

    // 对于非开始和结束节点，添加基本操作
    if (!['start', 'end'].includes(node?.type)) {
      if (!['AND', 'OR', 'JSON2STR', 'STR2JSON', 'IMAGE', 'RESULT', 'LOOP_START'].includes(node.data.type as string)) {
        menuItems.push(
          <Menu.Item key="edit" onClick={handleEdit}>
            编辑节点
          </Menu.Item>
        );
      }

      menuItems.push(
        <Menu.Item key="copy" onClick={handleCopy}>
          复制节点
        </Menu.Item>
      );
      menuItems.push(
        <Menu.Item key="delete" onClick={handleDelete}>
          删除节点
        </Menu.Item>
      );
    }

    // 可以根据节点类型添加特定的操作
    if (node?.type === 'special') {
      menuItems.push(
        <Menu.Item key="special-action">
          特殊操作
        </Menu.Item>
      );
    }

    return menuItems;
  };

  return (
    <Menu>
      {renderMenuItems()}
    </Menu>
  );
};

export default NodeContextMenu;