import { getFileReq } from '@/services/file';
import { to } from '@/utils/promise';
import { useEffect, useMemo, useState } from 'react';
import ConfigTitle from '../ConfigTitle';
import styles from './index.less';

type ExperimentResultProps = {
  fileUrl?: string;
  imageUrl?: string;
};

function ExperimentResult({ fileUrl, imageUrl }: ExperimentResultProps) {
  const [result, setResult] = useState<string | undefined>('');

  const images = useMemo(() => {
    if (imageUrl) {
      return imageUrl.split(',').map((item) => item.trim());
    }
    return [];
  }, [imageUrl]);

  useEffect(() => {
    if (fileUrl) {
      getResultFile();
    }
  }, [fileUrl]);

  // 获取实验运行历史记录
  const getResultFile = async () => {
    const [res] = await to(getFileReq(fileUrl));
    if (res) {
      setResult(res as any as string);
    }
  };

  return (
    <div className={styles['experiment-result']}>
      <ConfigTitle title="实验结果"></ConfigTitle>
      <div className={styles['experiment-result__text']}>{result}</div>
      <ConfigTitle title="可视化结果"></ConfigTitle>
      <div className={styles['experiment-result__image-container']}>
        {images.map((item, index) => (
          <img
            key={index}
            className={styles['experiment-result__image-container__image']}
            src={item}
            draggable={false}
            alt=""
          />
        ))}
      </div>
    </div>
  );
}

export default ExperimentResult;
