import I18N from './I18N'
import React, { useMemo } from 'react'
import { Modal } from 'tntd'
import { UserRoleSelector } from './UserRoleSelector'

export function AssignUserModal(props) {
  const { visible, title, onClose, value } = props
  const transformedValue = useMemo(() => {
    if (value) {
      const { users, roles, ...rest } = value
      return {
        ...rest,
        usernames: users,
        roleUuids: roles,
      }
    }

    return value
  }, [value])
  const userSelectorProps = {
    ...props,
  }

  if (transformedValue) {
    userSelectorProps.value = transformedValue
  }

  return (
    <Modal
      title={title || I18N.base.index.fenPeiQuanXian}
      visible={visible}
      destroyOnClose
      onCancel={onClose}
      footer={null}
      width={720}
      className="assign-user-modal"
    >
      <UserRoleSelector {...userSelectorProps} showActions />
    </Modal>
  )
}