import {
  ModalForm,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import React from 'react';
import { OPTIONS } from '../../constants';
import { DictDataController, DictTypeController } from '../../services';

interface EditFormProps {
  title: string;
  type: 'add' | 'update';
  trigger: JSX.Element;
  value?: DictDataController.DictTypeFields;
  onOk?: () => void;
}

const EditForm: React.FC<EditFormProps> = ({
  trigger,
  title,
  value,
  type,
  onOk,
}) => {
  const [form] = Form.useForm<DictDataController.DictTypeFields>();

  return (
    <ModalForm<DictDataController.DictTypeFields>
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
      title={title}
      trigger={trigger}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        if (type === 'add') {
          await DictTypeController.addApi({ ...values });
        } else if (type === 'update') {
          await DictTypeController.updateApi({
            ...values,
            dictId: value?.dictId,
          });
        }
        message.success('提交成功');
        onOk?.();
        return true;
      }}
    >
      <ProFormText
        name="dictName"
        label="字典名称"
        initialValue={value?.dictName}
        rules={[{ required: true }]}
      />
      <ProFormText
        name="dictType"
        label="字典类型"
        initialValue={value?.dictType}
        rules={[{ required: true }]}
      />
      <ProFormRadio.Group
        label="状态"
        name="status"
        initialValue={value?.status || '0'}
        options={OPTIONS.OPTIONS_STATUS}
      />
      <ProFormTextArea
        label="备注"
        name="remark"
        initialValue={value?.remark}
      />
    </ModalForm>
  );
};

export default EditForm;
