import {
  ModalForm,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import React from 'react';
import { OPTIONS } from '../../../constants';
import { ButtonController } from '../../../services';
interface EditFormProps {
  title: string;
  type: 'add' | 'update';
  trigger: JSX.Element;
  value?: ButtonController.ButtonFields;
  onOk?: () => void;
}

interface ModalFormProps extends ButtonController.ButtonFields {
  roleIds: string;
}

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

  return (
    <ModalForm<ModalFormProps & { password_sure: string }>
      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 ButtonController.addApi({ ...values });
        } else if (type === 'update') {
          await ButtonController.updateApi({
            ...values,
            buttonId: value?.buttonId,
          });
        }
        message.success('提交成功');
        onOk?.();
        return true;
      }}
    >
      <ProFormText
        name="menuName"
        label="菜单名称"
        initialValue={value?.menuName}
        placeholder="请输入菜单名称"
        rules={[{ required: true }]}
      />
      <ProFormText
        name="menuPath"
        label="菜单路由"
        initialValue={value?.menuPath}
        placeholder="请输入菜单路由"
        rules={[{ required: true }]}
      />
      <ProFormText
        name="buttonName"
        label="按钮名称"
        placeholder="请输入按钮名称"
        initialValue={value?.buttonName}
        rules={[{ required: true }]}
      />

      <ProFormText
        name="perms"
        label="权限字符"
        placeholder="请输入权限字符"
        initialValue={value?.perms}
        rules={[{ required: true }]}
      />
      <ProFormRadio.Group
        label="状态"
        name="status"
        initialValue={value?.status || '1'}
        options={OPTIONS.OPTIONS_AVAILABLE}
      />
      <ProFormTextArea
        label="备注"
        placeholder="请输入内容"
        name="remark"
        initialValue={value?.remark}
      />
    </ModalForm>
  );
};

export default EditForm;
