import {
  getReqParamName,
  type FormParameter,
} from '@/pages/HyperParameter/components/CreateForm/utils';
import { HyperParameterData } from '@/pages/HyperParameter/types';
import tableCellRender, { TableCellValueType } from '@/utils/table';
import { Table, Tooltip, type TableProps } from 'antd';
import { useMemo } from 'react';
import styles from './index.less';

type ParameterInfoProps = {
  info: HyperParameterData;
};

function ParameterInfo({ info }: ParameterInfoProps) {
  const parameters = useMemo(() => {
    if (!info.parameters) {
      return [];
    }
    return info.parameters.map((item) => {
      const paramName = getReqParamName(item.type);
      const range = item[paramName];
      return {
        ...item,
        range,
      };
    });
  }, [info]);

  const runParameters = useMemo(() => {
    if (!info.points_to_evaluate) {
      return [];
    }
    return info.points_to_evaluate.map((item, index) => ({
      ...item,
      id: index,
    }));
  }, [info]);

  const columns: TableProps<FormParameter>['columns'] = [
    {
      title: '参数名称',
      dataIndex: 'name',
      key: 'type',
      width: '40%',
      render: tableCellRender(true),
      ellipsis: { showTitle: false },
    },
    {
      title: '参数类型',
      dataIndex: 'type',
      key: 'type',
      width: '20%',
      render: tableCellRender(true),
      ellipsis: { showTitle: false },
    },
    {
      title: '取值范围',
      dataIndex: 'range',
      key: 'range',
      width: '40%',
      render: tableCellRender(true, TableCellValueType.Custom, {
        format: (value) => {
          return JSON.stringify(value);
        },
      }),
      ellipsis: { showTitle: false },
    },
  ];

  const runColumns: TableProps<Record<string, any>>['columns'] =
    runParameters.length > 0
      ? parameters.map(({ name }) => {
          return {
            title: (
              <Tooltip title={name}>
                <span>{name}</span>
              </Tooltip>
            ),
            dataIndex: name,
            key: name,
            width: 150,
            render: tableCellRender(true),
            ellipsis: { showTitle: false },
          };
        })
      : [];

  return (
    <div className={styles['parameter-info']}>
      <div className={styles['parameter-info__title']}>参数</div>
      <Table dataSource={parameters} columns={columns} rowKey="name" bordered pagination={false} />
      <div className={styles['parameter-info__title']}>手动运行参数</div>
      <Table
        dataSource={runParameters}
        columns={runColumns}
        rowKey="id"
        bordered
        pagination={false}
        scroll={{ x: '100%' }}
      />
    </div>
  );
}

export default ParameterInfo;
