import React from 'react';
import styles from './style/compReview.module.less';

const CompReview = ({ componentDesignData }) => {

  // 确保数据是数组格式
  const dataArray = Array.isArray(componentDesignData) ? componentDesignData :
    componentDesignData ? [componentDesignData] : [];

  return (
    <div className={styles['comp-review-container']}>
      <div className={styles['comp-review-header']}>
        <div className={styles['comp-review-title']}>组件预览</div>
      </div>
      <div className={styles['comp-review-body']}>
        <div className={styles['comp-review-content']}>
          {/* 上方内容 - 根据数组长度渲染 */}
          <div className={styles['comp-review-top']}>
            {dataArray.map((data, index) => (
              <div key={data.key || data.id || index} className={styles['comp-review-item']}>
                <div className={styles['comp-review-name']}>{data.ident}</div>
              </div>
            ))}
          </div>

          {/* 输入输出部分 - 根据数组长度渲染 */}
          <div className={styles['comp-review-io']}>
            {/* 输入部分 */}
            <div className={styles['comp-review-input']}>
              <div className={styles['comp-review-io-label']}>input</div>
              <div className={styles['comp-review-io-items']}>
                {dataArray.map((data, index) => {
                  // 确保参数始终是数组格式
                  const parameters = Array.isArray(data.parameters) ? data.parameters :
                    (data.parameters ? [data.parameters] : []);

                  return (
                    <div key={data.key || data.id || index}>
                      {parameters.length > 0 ? (
                        parameters.map((param, paramIndex) => (
                          <div key={paramIndex} className={styles['comp-review-io-item']}>
                            {param.ident} {param.type}
                          </div>
                        ))
                      ) : (
                        <div className={styles['comp-review-io-placeholder']}>
                          无输入参数
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* 输出部分 */}
            <div className={styles['comp-review-output']}>
              <div className={styles['comp-review-io-label']}>output</div>
              <div className={styles['comp-review-io-items']}>
                {dataArray.every((data) => {
                  const responses = Array.isArray(data.responses) ? data.responses :
                    (data.responses ? [data.responses] : []);
                  return responses.length === 0;
                }) ? (
                  <div className={styles['comp-review-io-placeholder']}>
                    无输出参数
                  </div>
                ) : (
                  dataArray.map((data, index) => {
                    const responses = Array.isArray(data.responses) ? data.responses :
                      (data.responses ? [data.responses] : []);
                    return (
                      <div key={data.key || data.id || index}>
                        {responses.map((response, responseIndex) => (
                          <div key={responseIndex} className={styles['comp-review-io-item']}>
                            {response.type} {response.ident}
                          </div>
                        ))}
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompReview;