import React from 'react';
import { Menu, Tabs } from '@arco-design/web-react';
import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';

const TabPane = Tabs.TabPane;

interface AddNodeMenuProps {
  onAddNode: (nodeType: string) => void;
  position?: { x: number; y: number }; // 用于画布上下文菜单
  edgeId?: string; // 用于边上下文菜单
}

const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
                                                   onAddNode
                                                 }) => {
  // 按分组组织节点数据
  const groupedNodes = localNodeData.reduce((acc, node) => {
    if (!acc[node.nodeGroup]) {
      acc[node.nodeGroup] = [];
    }
    acc[node.nodeGroup].push(node);
    return acc;
  }, {} as Record<string, typeof localNodeData>);

  const handleAddNode = (nodeType: string) => {
    onAddNode(nodeType);
  };

  // 分组名称映射
  const groupNames: Record<string, string> = {
    'common': '系统组件',
    'application': '应用组件',
    'composite': '复合组件'
  };

  return (
    <div
      style={{
        backgroundColor: '#ffffff',
        padding: '10px',
        borderRadius: '10px',
        maxHeight: '400px',
        display: 'flex',
        flexDirection: 'column'
      }}
    >
      <Tabs defaultActiveTab="common" style={{ flex: '0 0 auto' }}>
        {Object.entries(groupedNodes).map(([group, nodes]) => (
          <TabPane key={group} title={groupNames[group] || group}>
            <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
              <Menu
                style={{
                  width: 200,
                  border: '1px solid #e4e7ed',
                  borderRadius: 4,
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
                }}
                mode="vertical"
                hasCollapseButton={false}
              >
                {nodes.map((node) => (
                  <Menu.Item
                    key={node.nodeType}
                    onClick={() => handleAddNode(node.nodeType)}
                    style={{
                      padding: '0 16px',
                      height: 36,
                      lineHeight: '36px'
                    }}
                  >
                    {node.nodeName}
                  </Menu.Item>
                ))}
              </Menu>
            </div>
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default AddNodeMenu;