import KFIcon from '@/components/KFIcon';
import { ActiveLearnTrial } from '@/pages/ActiveLearn/types';
import TrialFileTree from '@/pages/HyperParameter/components/TrialFileTree';
import { downloadCommonFile, MimeType } from '@/utils/downloadfile';
import tableCellRender, { TableCellValueType } from '@/utils/table';
import { Button, Table, type TableProps } from 'antd';
import classNames from 'classnames';
import { useState } from 'react';
import styles from './index.less';

type ExperimentHistoryProps = {
  trialList: ActiveLearnTrial[];
  isClassification: boolean;
};

function ExperimentHistory({ trialList, isClassification }: ExperimentHistoryProps) {
  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
  const columns: TableProps<ActiveLearnTrial>['columns'] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 100,
      render: tableCellRender(false, TableCellValueType.Index),
    },
    {
      title: '查询数据量',
      dataIndex: 'n_instances',
      key: 'n_instances',
      render: tableCellRender(false),
    },
    {
      title: '总数据量',
      dataIndex: 'data_num',
      key: 'data_num',
      render: tableCellRender(false),
    },
    {
      title: isClassification ? '准确率' : '均方误差',
      dataIndex: isClassification ? 'accuracy' : 'mse',
      key: 'accuracy',
      render: tableCellRender(false),
    },
    {
      title: '查询数据 id',
      dataIndex: 'query_idx',
      key: 'query_idx',
      render: (query_idx: string) => (
        <div>
          <Button
            type="link"
            size="small"
            key="start"
            icon={<KFIcon type="icon-xiazai" />}
            onClick={() => {
              if (query_idx) {
                const fileName = query_idx.split('/').pop();
                let url = query_idx;
                if (process.env.NODE_ENV === 'development') {
                  url = query_idx.replace('172.168.15.197:31213', 'localhost:8000');
                }
                downloadCommonFile(url, MimeType.JSON, fileName);
              }
            }}
          >
            下载
          </Button>
        </div>
      ),
    },
  ];

  // 自定义展开视图
  const expandedRowRender = (record: ActiveLearnTrial) => {
    return <TrialFileTree title="训练结果" file={record.file}></TrialFileTree>;
  };

  // 展开实例
  const handleExpandChange = (expanded: boolean, record: ActiveLearnTrial) => {
    if (expanded) {
      setExpandedRowKeys([record.trial_id]);
    } else {
      setExpandedRowKeys([]);
    }
  };

  return (
    <div className={styles['experiment-history']}>
      <div className={styles['experiment-history__content']}>
        <div
          className={classNames(
            'vertical-scroll-table-no-page',
            styles['experiment-history__content__table'],
          )}
        >
          <Table
            dataSource={trialList}
            columns={columns}
            pagination={false}
            scroll={{ y: 'calc(100% - 55px)' }}
            rowKey="trial_id"
            expandable={{
              expandedRowRender: expandedRowRender,
              onExpand: handleExpandChange,
              expandedRowKeys: expandedRowKeys,
              rowExpandable: (record: ActiveLearnTrial) => !!record.file,
            }}
          />
        </div>
      </div>
    </div>
  );
}

export default ExperimentHistory;
