/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 创建开发环境
 */
import KFIcon from '@/components/KFIcon';
import KFRadio, { type KFRadioItem } from '@/components/KFRadio';
import PageTitle from '@/components/PageTitle';
import ResourceSelect, {
  requiredValidator,
  type ParameterInputObject,
} from '@/components/ResourceSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { useComputingResource } from '@/hooks/resource';
import { ResourceSelectorType } from '@/pages/Pipeline/components/ResourceSelectorModal';
import { createEditorReq } from '@/services/developmentEnvironment';
import { to } from '@/utils/promise';
import { useNavigate } from '@umijs/max';
import { App, Button, Col, Form, Input, Row, Select } from 'antd';
import { omit, pick } from 'lodash';
import styles from './index.less';

type FormData = {
  name: string;
  computing_resource: string;
  standard: string;
  image: ParameterInputObject;
  model: ParameterInputObject;
  dataset: ParameterInputObject;
};

enum ComputingResourceType {
  GPU = 'GPU',
  NPU = 'NPU',
}

const EditorRadioItems: KFRadioItem[] = [
  {
    key: ComputingResourceType.GPU,
    title: '英伟达GPU',
    icon: <KFIcon type="icon-jiyugongwangjingxiang" />,
  },
  {
    key: ComputingResourceType.NPU,
    title: '昇腾NPU',
    icon: <KFIcon type="icon-bendishangchuan" />,
  },
];

function EditorCreate() {
  const navgite = useNavigate();
  const [form] = Form.useForm();
  const { message } = App.useApp();
  const [resourceStandardList, filterResourceStandard] = useComputingResource();

  // 创建编辑器
  const createEditor = async (formData: FormData) => {
    // 根据后台要求，修改表单数据
    const image = formData['image'];
    const model = formData['model'];
    const dataset = formData['dataset'];
    const params = {
      ...omit(formData, ['image', 'model', 'dataset']),
      image: image.value,
      model: pick(model, ['id', 'version', 'path', 'showValue']),
      dataset: pick(dataset, ['id', 'version', 'path', 'showValue']),
    };
    const [res] = await to(createEditorReq(params));
    if (res) {
      message.success('创建成功');
      navgite(-1);
    }
  };

  // 提交
  const handleSubmit = (values: FormData) => {
    createEditor(values);
  };

  // 取消
  const cancel = () => {
    navgite(-1);
  };

  return (
    <div className={styles['editor-create']}>
      <PageTitle title="创建开发环境"></PageTitle>
      <div className={styles['editor-create__content']}>
        <div>
          <Form
            name="editor-create"
            labelCol={{ flex: '100px' }}
            wrapperCol={{ flex: 1 }}
            labelAlign="left"
            form={form}
            initialValues={{ computing_resource: ComputingResourceType.GPU }}
            onFinish={handleSubmit}
            size="large"
            autoComplete="off"
          >
            <SubAreaTitle
              title="基本信息"
              image={require('@/assets/img/mirror-basic.png')}
              style={{ marginBottom: '26px' }}
            ></SubAreaTitle>
            <Row gutter={10}>
              <Col span={10}>
                <Form.Item
                  label="任务名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入任务名称',
                    },
                  ]}
                >
                  <Input placeholder="请输入任务名称" maxLength={64} showCount allowClear />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={10}>
              <Col span={10}>
                <Form.Item
                  label="计算资源"
                  name="computing_resource"
                  rules={[
                    {
                      required: true,
                      message: '请选择计算资源',
                    },
                  ]}
                >
                  <KFRadio items={EditorRadioItems}></KFRadio>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="资源规格"
                  name="standard"
                  rules={[
                    {
                      required: true,
                      message: '请选择资源规格',
                    },
                  ]}
                >
                  <Select
                    showSearch
                    placeholder="请选择资源规格"
                    filterOption={filterResourceStandard}
                    options={resourceStandardList}
                    fieldNames={{
                      label: 'description',
                      value: 'standard',
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <SubAreaTitle
              title="参数设置"
              image={require('@/assets/img/editor-parameter.png')}
              style={{ marginTop: '20px', marginBottom: '24px' }}
            ></SubAreaTitle>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="镜　　像"
                  name="image"
                  rules={[
                    {
                      validator: requiredValidator,
                      message: '请选择镜像',
                    },
                  ]}
                  required
                >
                  <ResourceSelect
                    type={ResourceSelectorType.Mirror}
                    placeholder="请选择镜像"
                    canInput={false}
                    size="large"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="模　　型"
                  name="model"
                  rules={[
                    {
                      validator: requiredValidator,
                      message: '请选择模型',
                    },
                  ]}
                  required
                >
                  <ResourceSelect
                    type={ResourceSelectorType.Model}
                    placeholder="请选择模型"
                    canInput={false}
                    size="large"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="数据集"
                  name="dataset"
                  rules={[
                    {
                      validator: requiredValidator,
                      message: '请选择数据集',
                    },
                  ]}
                  required
                >
                  <ResourceSelect
                    type={ResourceSelectorType.Dataset}
                    placeholder="请选择数据集"
                    canInput={false}
                    size="large"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
              <Button
                type="default"
                htmlType="button"
                onClick={cancel}
                style={{ marginLeft: '20px' }}
              >
                取消
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default EditorCreate;