import TreeNodeSelect from '@/pages/Project/Management/List/components/TreeNodeSelect'
import { linkRoleAccount } from '@/services/permission'
import { PlusOutlined } from '@ant-design/icons'
import ProForm, { ModalForm } from '@ant-design/pro-form'
import { Button, message } from 'antd'
import { useRef } from 'react'
import type { ProFormInstance } from '@ant-design/pro-form'
import { useRequest } from '@umijs/max'

const ConnectModal = ({ dataId, onReload }) => {
  const formRef = useRef<ProFormInstance>(null)
  const { run: tryConnectRoleAccount } = useRequest(
    (params: API.LinkAccountParams) => linkRoleAccount(params),
    {
      manual: true,
      onSuccess: async () => {
        await onReload()
      }
    }
  )
  return (
    <ModalForm
      formRef={formRef}
      title="添加用户"
      width="30%"
      onVisibleChange={visible => !visible && formRef.current?.resetFields()}
      layout="horizontal"
      trigger={
        <Button size="small" type="primary" ghost>
          <PlusOutlined />
          添加用户
        </Button>
      }
      onFinish={async values => {
        await tryConnectRoleAccount({ ...values, ID: dataId })
        message.success('添加成功')
        return true
      }}>
      <ProForm.Item label="选择用户" name="accountIDs" rules={[{ required: true, message: '请选择创建人' }]}>
        <TreeNodeSelect exclusionRoleID={dataId} />
      </ProForm.Item>
    </ModalForm>
  )
}

export default ConnectModal