import { ExperimentInstance } from '@/types';
import { useNavigate } from '@umijs/max';
import { Empty } from 'antd';
import styles from './index.less';
import ExperimentInstanceComponent from './instance';

type ExperimentTableProps = {
  tableData: ExperimentInstance[];
  style?: React.CSSProperties;
};

function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
  const navigate = useNavigate();
  const gotoExperiment = (record: ExperimentInstance) => {
    navigate(`/pipeline/experiment/instance/${record.workflow_id}/${record.id}`);
  };

  return (
    <div className={styles['experiment-table']} style={style}>
      <div className={styles['experiment-table__header']}>
        <div className={styles['experiment-table__status']}>状态</div>
        <div className={styles['experiment-table__duration']}>运行时长</div>
        <div className={styles['experiment-table__date']}>开始时间</div>
        <div className={styles['experiment-table__operation']}>操作</div>
      </div>
      {Array.isArray(tableData) && tableData.length > 0 ? (
        tableData.map((item) => (
          <ExperimentInstanceComponent
            instance={item}
            key={item.id}
            onClick={() => gotoExperiment(item)}
          />
        ))
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          imageStyle={{ height: '40px', marginTop: '-10px' }}
        />
      )}
    </div>
  );
}

export default ExperimentTable;
