import FormInfo from '@/components/FormInfo';
import ParameterSelect from '@/components/ParameterSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { PipelineNodeModelSerialize } from '@/types';
import { Form } from 'antd';
import styles from './index.less';

type ExperimentParameterProps = {
  nodeData: PipelineNodeModelSerialize;
};

function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
  // 控制策略
  const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map(
    ([key, value]) => ({ key, value }),
  );

  // 输入参数
  const inParametersList = Object.entries(nodeData.in_parameters ?? {}).map(([key, value]) => ({
    key,
    value,
  }));

  // 输出参数
  const outParametersList = Object.entries(nodeData.out_parameters ?? {}).map(([key, value]) => ({
    key,
    value,
  }));

  return (
    <Form
      name="form"
      layout="vertical"
      labelCol={{
        span: 24,
      }}
      wrapperCol={{
        span: 24,
      }}
      initialValues={nodeData}
      style={{
        maxWidth: 600,
      }}
      autoComplete="off"
      className={styles['experiment-parameter']}
    >
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/static-message.png')}
          title="基本信息"
        ></SubAreaTitle>
      </div>
      <Form.Item
        label="任务名称"
        name="label"
        rules={[
          {
            required: true,
            message: '请输入任务名称',
          },
        ]}
      >
        <FormInfo />
      </Form.Item>
      <Form.Item
        label="任务ID"
        name="id"
        rules={[
          {
            required: true,
            message: '请输入任务id',
          },
        ]}
      >
        <FormInfo />
      </Form.Item>
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/duty-message.png')}
          title="任务信息"
        ></SubAreaTitle>
      </div>
      <Form.Item
        label="镜像"
        name="image"
        rules={[
          {
            required: true,
            message: '请输入镜像',
          },
        ]}
      >
        <FormInfo />
      </Form.Item>
      <Form.Item label="工作目录" name="working_directory">
        <FormInfo />
      </Form.Item>

      <Form.Item label="启动命令" name="command">
        <FormInfo textArea />
      </Form.Item>
      <Form.Item
        label="资源规格"
        name="resources_standard"
        rules={[
          {
            required: true,
            message: '请输入资源规格',
          },
        ]}
      >
        <ParameterSelect dataType="resource" placeholder="请选择资源规格" display />
      </Form.Item>
      <Form.Item label="挂载路径" name="mount_path">
        <FormInfo />
      </Form.Item>
      <Form.Item label="环境变量" name="env_variables">
        <FormInfo textArea />
      </Form.Item>
      {controlStrategyList.map((item) => (
        <Form.Item key={item.key} name={['control_strategy', item.key]} label={item.value.label}>
          <FormInfo valuePropName="showValue" />
        </Form.Item>
      ))}
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/duty-message.png')}
          title="输入参数"
        ></SubAreaTitle>
      </div>
      {inParametersList.map((item) => (
        <Form.Item
          key={item.key}
          name={['in_parameters', item.key]}
          label={item.value.label + '(' + item.key + ')'}
          rules={[{ required: item.value.require ? true : false }]}
        >
          {item.value.type === 'select' ? (
            ['dataset', 'model', 'service', 'resource'].includes(item.value.item_type) ? (
              <ParameterSelect dataType={item.value.item_type as any} display />
            ) : null
          ) : (
            <FormInfo valuePropName="showValue" />
          )}
        </Form.Item>
      ))}
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/duty-message.png')}
          title="输出参数"
        ></SubAreaTitle>
      </div>
      {outParametersList.map((item) => (
        <Form.Item
          key={item.key}
          name={['out_parameters', item.key]}
          label={item.value.label + '(' + item.key + ')'}
          rules={[{ required: item.value.require ? true : false }]}
        >
          <FormInfo valuePropName="showValue" />
        </Form.Item>
      ))}
    </Form>
  );
}

export default ExperimentParameter;
