import React from 'react';
import styles from './style/sideBar.module.less';
import { Button, Input, Tree } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';

const TreeNode = Tree.Node;

const SideBar = ({ compList, onSelect }) => {

  const renderTreeNode = (menuItems, parentKey = '0') => {
    // 标题枚举值
    const titleMap = new Map([
      ['projectCompDto', {
        title: '基础组件',
        icon: <img src={'/ideContainer/icon/projectComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['projectFlowDto', {
        title: '复合组件',
        icon: <img src={'/ideContainer/icon/projectComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['mineComp', {
        title: '我的组件',
        icon: <img src={'/ideContainer/icon/mineComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['pubComp', {
        title: '公共组件',
        icon: <img src={'/ideContainer/icon/pubComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['teamWorkComp', {
        title: '协助组件',
        icon: <img src={'/ideContainer/icon/teamWorkComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['mineFlow', {
        title: '我的组件',
        icon: <img src={'/ideContainer/icon/mineComp.png'} style={{ width: 17, height: 17 }} />
      }],
      ['pubFlow', {
        title: '公共组件',
        icon: <img src={'/ideContainer/icon/pubComp.png'} style={{ width: 17, height: 17 }} />
      }]
    ]);

    if (!menuItems) return null;

    // 如果是数组，表示是最底层的子节点，直接渲染
    if (Array.isArray(menuItems)) {
      return menuItems.map((item, index) => {
        const treeNodeProps = {
          dataRef: item // 传递原始数据
        };
        return (<TreeNode
          {...treeNodeProps}
          key={`${parentKey}-${index}`}
          title={item.name}
          icon={<img src={'/ideContainer/icon/compItem.png'} style={{ width: 17, height: 17 }} />}
        />);
      });
    }

    // 如果是对象，递归渲染子节点
    return Object.keys(menuItems).map((key, index) => {
      const child = menuItems[key];
      const currentKey = `${parentKey}-${index}`;
      const title = titleMap.get(key)?.title || key;
      const icon = titleMap.get(key)?.icon || null;

      // 如果子节点是数组或对象，继续递归
      if (Array.isArray(child) || typeof child === 'object') {
        return (
          <TreeNode key={currentKey} title={title} icon={icon}>
            {renderTreeNode(child, currentKey)}
          </TreeNode>
        );
      }

      // 否则直接渲染叶子节点
      return <TreeNode key={currentKey} title={title} />;
    });
  };

  return (
    <div className={styles['side-bar']}>
      <div className={styles['handle-box']}>
        <Input
          prefix={<IconSearch />}
          placeholder={'搜索组件'}
          style={{ width: '90%' }}
        />
        <Button
          type="primary"
          style={{ marginLeft: 5 }}
        >
          搜索
        </Button>
      </div>
      <div className={styles['comp-list']}>
        <Tree
          defaultExpandedKeys={['0-0-0']}
          defaultSelectedKeys={['0-0-0', '0-0-1']}
          selectedKeys={[]} // 移除选中样式
          style={{ background: 'transparent' }} // 移除背景色
          onSelect={(value, info) => {
            if (info.node.props.dataRef.hasOwnProperty('children')) return;
            onSelect(info.node?.props?.dataRef || null);
          }}
        >
          {renderTreeNode({ projectCompDto: compList.projectCompDto, projectFlowDto: compList.projectFlowDto })}
        </Tree>
      </div>
    </div>
  );
};

export default SideBar;