import React from 'react';
import styles from './style/style.module.less';
import DynamicIcon from '@/components/DynamicIcon';
import { Card } from '@arco-design/web-react';
import { Collapse } from '@arco-design/web-react';
import { localNodeData } from './config/localNodeData';

const CollapseItem = Collapse.Item;

const onDragStart = (event: React.DragEvent, nodeData: any) => {
  event.dataTransfer.setData('application/reactflow', JSON.stringify(nodeData));
  event.dataTransfer.effectAllowed = 'move';
};

const SideBar: React.FC = () => {
  return (
    <div className={styles['side-bar-container']}>
      <div className={styles['title']}>
        <h3>节点库</h3>
        <p>将节点拖拽到画布中</p>
      </div>

      <Collapse bordered={false} accordion>
        <CollapseItem header="应用组件" name="1">
        </CollapseItem>
        <CollapseItem header="复合组件" name="2">
        </CollapseItem>
        <CollapseItem header="系统组件" name="3">
          {localNodeData.map((item, index) => (
            <Card
              key={index}
              style={{ marginBottom: 5, cursor: 'grab' }}
              draggable
              onDragStart={(event) => onDragStart(event, item)}
            >
              <div className={styles['flex-box']}>
                <DynamicIcon type={item.icon} style={{ fontSize: '18px', color: 'rgb(var(--primary-6))' }} />
                <div className={styles['node-name']}>{item.nodeName}</div>
              </div>
            </Card>
          ))}
        </CollapseItem>
      </Collapse>
    </div>
  );
};

export default SideBar;