import KFModal from '@/components/KFModal';
import { createEditorMirrorReq } from '@/services/developmentEnvironment';
import { to } from '@/utils/promise';
import { Form, Input, message, type ModalProps } from 'antd';

interface CreateMirrorModalProps extends Omit<ModalProps, 'onOk'> {
  envId: number; // 开发环境id
  onOk: () => void;
}

function CreateMirrorModal({ envId, onOk, ...rest }: CreateMirrorModalProps) {
  // 上传请求
  const createDatasetVersion = async (params: any) => {
    const [res] = await to(
      createEditorMirrorReq({
        ...params,
        dev_environment_id: envId,
        upload_type: 1,
        version: params['tagName'],
      }),
    );
    if (res) {
      message.success('创建成功，请到 “多形态资源库” - “个人镜像” 中查看');
      onOk?.();
    }
  };

  // 提交
  const onFinish = (formData: any) => {
    createDatasetVersion(formData);
  };

  return (
    <KFModal
      {...rest}
      title="制作镜像"
      image={require('@/assets/img/create-experiment.png')}
      width={825}
      okButtonProps={{
        htmlType: 'submit',
        form: 'form',
      }}
    >
      <Form name="form" layout="vertical" onFinish={onFinish} autoComplete="off">
        <Form.Item
          label="镜像名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入镜像名称',
            },
            {
              pattern: /^[a-z0-9/._-]*$/,
              message: '只支持小写字母、数字、点(.)、下划线(_)、中横线(-)、斜杠(/)',
            },
          ]}
        >
          <Input placeholder="请输入镜像名称" maxLength={64} showCount allowClear />
        </Form.Item>
        <Form.Item
          label="镜像版本"
          name="tag_name"
          rules={[
            {
              required: true,
              message: '请输入镜像版本',
            },
            {
              pattern: /^[a-zA-Z0-9._-]+$/,
              message: '版本只支持字母、数字、点(.)、下划线(_)、中横线(-)',
            },
          ]}
        >
          <Input placeholder="请输入镜像版本" maxLength={64} showCount allowClear />
        </Form.Item>
        <Form.Item
          label="镜像描述"
          name="description"
          rules={[
            {
              required: true,
              message: '请输入镜像描述',
            },
          ]}
        >
          <Input.TextArea
            placeholder="请输入镜像描述"
            autoSize={{ minRows: 3, maxRows: 6 }}
            maxLength={128}
            showCount
            allowClear
          />
        </Form.Item>
      </Form>
    </KFModal>
  );
}

export default CreateMirrorModal;