import { Alert, Anchor } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { RBACRoleUINames } from 'dbaas/contexts/access-control'

import { ScopeTypeConst, ScopeTypes } from '../../UserAccess/helpers'

export const RoleDesc = ({ type = ScopeTypeConst.Org }: { type?: ScopeTypes }) => {
  const { watch } = useFormContext()
  const role = watch('role')

  return (
    <Alert icon={<IconInfoCircle size={14} color="inherit" />}>
      Current API Key role is {RBACRoleUINames[role]}, check{' '}
      <Anchor
        href={`https://docs.pingcap.com/tidbcloud/manage-user-access#${type === ScopeTypeConst.Org ? 'user-roles' : 'project-roles'}`}
        target="_blank"
        rel="noreferrer"
      >
        permission of {type === ScopeTypeConst.Org ? 'Organization' : 'Project'} roles.
      </Anchor>
    </Alert>
  )
}

export default RoleDesc