import React from 'react';
import styles from './style/compNode.module.less';
import { Card, Divider, Tag } from '@arco-design/web-react';
import { IconCaretRight } from '@arco-design/web-react/icon';
import { formatDataType } from '@/utils/common';

type NodeData = {
  label: string;

  [key: string]: any
};

interface CompNodeProps {
  nodeData: NodeData;
}

const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
  return (
    <div className={styles['comp-node-container']}>
      <Card style={{ width: 450, margin: 10, border: '1px solid #dfe4ea' }}>
        {/*节点渲染*/}
        <div className={styles['comp-node-box']}>
          {/*节点标题*/}
          <div className={styles['comp-node-title']}>
            {nodeData.label}
          </div>
          {/*节点api相关的输入输出*/}
          <div className={styles['comp-node-api']}>
            <div className={styles['api-in']}>
              {nodeData.apis.map((v, i) => {
                return (
                  <div key={i} className={styles['flex-box']}>
                    <div className={styles['right-arrow']}></div>
                    <div style={{ marginLeft: 5 }}>{v.id}</div>
                  </div>
                );
              })}
            </div>
            <div className={styles['api-out']}>
              <div className={styles['flex-box']}>
                <div style={{ marginRight: 5 }}>{nodeData.apiOut.id}</div>
                <div className={styles['right-arrow']}></div>
              </div>
            </div>
          </div>
          <Divider></Divider>
          {/*节点data相关的输入输出*/}
          <div className={styles['comp-node-data']}>
            <div className={styles['data-in']}>
              {nodeData.dataIns.map((v, i) => {
                return (
                  <div key={i} className={styles['flex-box']}>
                    <div className={styles['rectangular']}></div>
                    <div style={{ marginLeft: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
                  </div>
                );
              })}
            </div>
            <div className={styles['data-out']}>
              {nodeData.dataOuts.map((v, i) => {
                return (
                  <div key={i} className={styles['flex-box']}>
                    <div style={{ marginRight: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
                    <div className={styles['rectangular']}></div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        {/*其他信息渲染*/}
        <div className={styles['comp-node-other']}>
          <Tag color="arcoblue">{nodeData.comp.codeLanguage}</Tag>
          <div className={styles['description']}>{nodeData.comp.description}</div>
        </div>
      </Card>
    </div>
  );
};

export default CompNode;