import React from 'react';
import styles from './style/compInfo.module.less';
import { Space, Divider, Table, TableColumnProps } from '@arco-design/web-react';

const CompInfo = ({ currentCompInfo }) => {

  const columns: TableColumnProps[] = [
    {
      title: '参数名',
      dataIndex: 'id'
    },
    {
      title: '参数类型',
      dataIndex: 'dataType'
    },
    {
      title: '描述',
      dataIndex: 'desc'
    }
  ];

  // 渲染节点参数列表
  const renderParamsTable = () => {
    return (
      <div className={styles['params']}>
        <h3>输入参数</h3>
        <Table
          columns={columns}
          data={currentCompInfo.def?.dataIns || currentCompInfo.flowHousVO?.dataIns}
          pagination={false}
          scroll={{
            y: 150
          }} />
        <h3>输出参数</h3>
        <Table
          columns={columns}
          data={currentCompInfo.def?.dataOuts || currentCompInfo.flowHousVO?.dataIns}
          pagination={false}
          scroll={{
            y: 150
          }} />
      </div>
    );
  };

  // 渲染组件外壳
  const renderCompHousing = () => {
    return (
      <div className={styles['comp-housing']}>
        <div className={styles['comp-housing-header']}>
          <div className={styles['comp-housing-title']}>{currentCompInfo.name || currentCompInfo?.main?.name}</div>
        </div>
        <div className={styles['comp-housing-content']}>
          {currentCompInfo.def ? (
            <>
              <div className={styles['comp-housing-content-api']}>
                <div className={styles['comp-housing-content-api-in']}>
                  {currentCompInfo.def?.apis?.map((item: any, index) => <div key={index}>{item.id}</div>)}
                </div>
                <div className={styles['comp-housing-content-api-out']}>
                  <div>{currentCompInfo.def?.apiOut?.id}</div>
                </div>
              </div>
              <Divider style={{ marginTop: 10, marginBottom: 10 }} />
              <div className={styles['comp-housing-content-data']}>
                <div className={styles['comp-housing-content-data-in']}>
                  {currentCompInfo.def?.dataIns?.map((item: any, index) => <div key={index}>{item.id}</div>)}
                </div>
                <div className={styles['comp-housing-content-data-out']}>
                  {currentCompInfo.def?.dataOuts?.map((item: any, index) => <div key={index}>{item.id}</div>)}
                </div>
              </div>
            </>
          ) : (
            <>
              <div className={styles['comp-housing-content-api']}>
                <div className={styles['comp-housing-content-api-in']}>
                  <div>contour</div>
                </div>
                <div className={styles['comp-housing-content-api-out']}>
                  <div>done</div>
                </div>
              </div>
              <Divider style={{ marginTop: 10, marginBottom: 10 }} />
              <div className={styles['comp-housing-content-data']}>
                <div className={styles['comp-housing-content-data-in']}>
                  {currentCompInfo.flowHousVO?.dataIns?.map((item: any, index) => <div key={index}>{item.id}</div>)}
                </div>
                <div className={styles['comp-housing-content-data-out']}>
                  {currentCompInfo.flowHousVO?.dataOuts?.map((item: any, index) => <div key={index}>{item.id}</div>)}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    );
  };

  return (
    currentCompInfo ? (<div className={styles['comp-container']}>
      <div className={styles['comp-preview']}>
        <h3>组件预览</h3>
        {renderCompHousing()}
      </div>
      <div className={styles['comp-info']}>
        <div className={styles['header']}>
          <Space size={40}>
            <div className={styles['title']}>{currentCompInfo.name || currentCompInfo?.main?.name}</div>
          </Space>
        </div>
        {currentCompInfo.def ? (<div className={styles['extra']}>
          <Divider style={{ borderColor: '#5484ff', marginTop: 0, marginBottom: 30 }} />
          <Space size={30}>
            <div className={styles['extra-font']}>{currentCompInfo.identifier}</div>
            <div className={styles['extra-font']}>分类：{currentCompInfo.componentClassify}</div>
            <div className={styles['extra-font']}>语言：{currentCompInfo.codeLanguage}</div>
          </Space>
        </div>) : null}
        <Divider style={{ marginTop: 15, borderBottomStyle: 'dashed' }} />
        <div className={styles['description']}>
          {currentCompInfo.description ? currentCompInfo.description : ' - '}
        </div>
        <Divider style={{ borderBottomStyle: 'dashed' }} />
        {renderParamsTable()}
        <Divider style={{ borderBottomStyle: 'dashed' }} />
      </div>
    </div>) : <div>请选择组件</div>
  );
};

export default CompInfo;