import React from 'react';
import { NodeProps, NodeItemsProps } from './node-list';
import { QxIcon } from '@/components';
import { CloseOutlined } from '@ant-design/icons';
import { useAction } from '@qx/flow';

const prefix = 'qx-flow-node-panel';
const NodeItem: React.FC<NodeItemProps> = (props) => {
  const { nodeItem, isManage, setNodeList, index, parentId } = props;

  const { addNode } = useAction();
  const handleAdd = (nodeType: string) => {
    addNode(nodeType);
  };

  const deleteNode = () => {
    setNodeList((nodeItems: NodeItemsProps[]) => {
      const tempList = [...nodeItems];
      tempList.forEach((el) => {
        if (el.id === parentId) {
          el.nodes?.splice(index, 1);
        }
      });
      return tempList;
    });
  };

  return (
    <div
      className={`${prefix}__item`}
      onClick={() => {
        if (isManage) return;
        console.log('点击我了，lllll');
        handleAdd(nodeItem.nodeType);
      }}
    >
      <QxIcon className={`${prefix}__item-icon`} type={'icon-frame-todolist'} />
      <span className={`${prefix}__item-name`}>{nodeItem.nodeName}</span>
      {isManage ? (
        <CloseOutlined
          className={`${prefix}__item--close`}
          onClick={() => deleteNode()}
        />
      ) : null}
    </div>
  );
};

interface NodeItemProps {
  nodeItem: NodeProps;
  isManage?: boolean;
  setNodeList?: any;
  index: number;
  parentId?: string;
}

export default NodeItem;