import {IntlConfig, Formatters, IntlFormatters} from '../types'
import {filterProps} from '../utils'
import {
  DisplayNamesOptions,
  DisplayNames as IntlDisplayNames,
} from '@formatjs/intl-displaynames'
import {FormatError, ErrorCode} from 'intl-messageformat'
import {ReactIntlErrorCode, ReactIntlError} from '../error'

const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
  'localeMatcher',
  'style',
  'type',
  'fallback',
]

export function formatDisplayName(
  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
  getDisplayNames: Formatters['getDisplayNames'],
  value: Parameters<IntlFormatters['formatDisplayName']>[0],
  options: Parameters<IntlFormatters['formatDisplayName']>[1] = {}
): string | undefined {
  const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames
  if (!DisplayNames) {
    onError(
      new FormatError(
        `Intl.DisplayNames is not available in this environment.
Try polyfilling it using "@formatjs/intl-displaynames"
`,
        ErrorCode.MISSING_INTL_API
      )
    )
  }
  const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS)
  try {
    return getDisplayNames(locale, filteredOptions).of(value)
  } catch (e) {
    onError(
      new ReactIntlError(
        ReactIntlErrorCode.FORMAT_ERROR,
        'Error formatting display name.',
        e
      )
    )
  }
}