import {ReadOnlyIcon} from '@sanity/icons'
import {Text} from '@sanity/ui'
import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'

import {structureLocaleNamespace} from '../../../../i18n'
import {Banner} from './Banner'

interface PermissionCheckBannerProps {
  granted: boolean
  requiredPermission: 'update' | 'create'
}

export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
  const currentUser = useCurrentUser()
  const listFormat = useListFormat({style: 'short'})
  const {t} = useTranslation(structureLocaleNamespace)

  if (granted) return null

  const roleTitles = (currentUser?.roles || []).map((role) => role.title)
  const roles = listFormat
    .formatToParts(roleTitles)
    .map((part) =>
      part.type === 'element' ? <code key={part.value}>{part.value}</code> : part.value,
    )

  return (
    <Banner
      content={
        <Text size={1} weight="medium">
          <Translate
            t={t}
            i18nKey="banners.permission-check-banner.missing-permission"
            components={{Roles: () => <>{roles}</>}}
            values={{count: roles.length, roles: roleTitles}}
            context={requiredPermission}
          />
        </Text>
      }
      data-testid="permission-check-banner"
      icon={ReadOnlyIcon}
    />
  )
}