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

interface PreviewProps {
  title: string;
  trigger: JSX.Element;
  type: 'add' | 'update';
  value?: Partial<RoleController.RoleFields>;
  onSubmit?: () => void;
}

interface ModalFormProps extends RoleController.RoleFields {
  menuIds: string[];
  buttonIds: string[];
}
const EditForm: React.FC<PreviewProps> = ({
  title,
  trigger,
  type,
  value,
  onSubmit,
}) => {
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);

  return (
    <>
      {React.cloneElement(trigger, {
        async onClick() {
          setOpen(true);
          if (type === 'update') {
            form.setFieldsValue({ ...value });
            const { roleId = '' } = value || {};
            const menuIds = await RoleController.getMenuDetailsApi(roleId);
            form.setFieldValue('menuIds', menuIds);
            const buttonIds = await RoleController.getButtonDetailsApi(roleId);
            form.setFieldValue('buttonIds', buttonIds);
          }
        },
      })}
      <ModalForm<ModalFormProps>
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        title={title}
        open={open}
        form={form}
        autoFocusFirstInput
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setOpen(false),
        }}
        onFinish={async (values) => {
          const { menuIds = [], buttonIds = [], roleType = '' } = values;
          const params = {
            ...values,
            menuIds,
            buttonIds,
            roleType,
          };
          if (type === 'add') {
            await RoleController.addApi(params);
          } else if (type === 'update') {
            await RoleController.updateApi({
              ...params,
              roleId: value?.roleId,
            });
          }
          message.success('提交成功');
          onSubmit?.();
          setOpen(false);
        }}
      >
        <ProFormText
          name="roleName"
          label="角色名称"
          rules={[{ required: true }]}
        />
        <ProFormSelect
          name="roleType"
          label="角色类别"
          options={OPTIONS.OPTIONS_ROLE}
          rules={[{ required: true }]}
        />
        <ProFormText
          name="roleKey"
          label="权限字符"
          rules={[
            {
              required: true,
            },
          ]}
        />
        <ProFormDigit
          name="roleSort"
          label="显示顺序"
          rules={[
            {
              required: true,
            },
          ]}
        />
        <ProFormTreeSelect
          name="menuIds"
          label="菜单权限"
          allowClear
          fieldProps={{
            treeNodeFilterProp: 'label',
            treeCheckable: true,
            showCheckedStrategy: 'SHOW_CHILD',
            maxTagCount: 3,
          }}
          debounceTime={1000}
          request={async () => RoleController.getMenuTreeListApi()}
        />
        <ProFormTreeSelect
          name="buttonIds"
          label="按钮权限"
          allowClear
          fieldProps={{
            treeNodeFilterProp: 'label',
            treeCheckable: true,
            showCheckedStrategy: 'SHOW_CHILD',
            maxTagCount: 3,
          }}
          debounceTime={1000}
          request={async () => RoleController.getButtonTreeListApi()}
        />
        <ProFormText
          name="defaultPage"
          label="默认首页"
          rules={[
            {
              required: true,
            },
          ]}
        />
        <ProFormRadio.Group
          label="状态"
          name="status"
          options={OPTIONS.OPTIONS_AVAILABLE}
          initialValue="1"
        />
        <ProFormTextArea label="备注" name="remark" />
      </ModalForm>
    </>
  );
};

export default EditForm;
