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

interface EditFormProps {
  title: string;
  type: 'add' | 'update';
  dictType?: DictDataController.DictTypeFields['dictType'];
  dictTypeList: SelectOptionFields[];
  trigger: JSX.Element;
  value?: DictDataController.DictDataFields;
  onOk: () => void;
  onOpen?: () => void;
}

const EditForm: React.FC<EditFormProps> = ({
  trigger,
  title,
  value,
  dictType,
  dictTypeList,
  type,
  onOk,
  onOpen,
}) => {
  const [form] = Form.useForm<DictDataController.DictDataFields>();
  return (
    <ModalForm<DictDataController.DictDataFields>
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
      title={title}
      trigger={trigger}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      onOpenChange={(open) => {
        if (open) {
          onOpen?.();
        }
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        if (type === 'add') {
          await DictDataController.addApi({ ...values });
        } else if (type === 'update') {
          await DictDataController.updateApi({
            ...values,
            dictCode: value?.dictCode,
          });
        }
        message.success('提交成功');
        onOk();
        return true;
      }}
    >
      <ProFormSelect
        name="dictType"
        label="字典类型"
        initialValue={type === 'update' ? value?.dictType : dictType}
        rules={[{ required: true }]}
        options={dictTypeList}
        disabled
      />
      <ProFormText
        name="dictLabel"
        label="数据标签"
        initialValue={value?.dictLabel}
        rules={[{ required: true }]}
      />
      <ProFormText
        name="dictValue"
        label="数据键值"
        initialValue={value?.dictValue}
        rules={[{ required: true }]}
      />
      <ProFormText
        name="cssClass"
        label="样式属性"
        initialValue={value?.cssClass}
      />
      <ProFormDigit
        name="dictSort"
        label="显示排序"
        initialValue={value?.dictSort}
        rules={[{ required: true }]}
      />
      <ProFormSelect
        name="listClass"
        label="回显样式"
        initialValue={value?.listClass}
        options={OPTIONS.OPTIONS_DICT_CLASS.map((item) => {
          const { label, value } = item;
          return {
            label: `${label}（${value}）`,
            value,
          };
        })}
      />
      <ProFormRadio.Group
        label="状态"
        name="status"
        initialValue={value?.status || '0'}
        options={OPTIONS.OPTIONS_STATUS}
      />
      <ProFormTextArea
        label="备注"
        name="remark"
        initialValue={value?.remark}
      />
    </ModalForm>
  );
};

export default EditForm;
