const handleTranslationError = (error: <missing_type>) => {
  if (!IS_DEVELOPMENT) {
    return
  }

  if (error instanceof MissingTranslationError) {
    const { code, descriptor } = error

    if (code === 'MISSING_TRANSLATION') {
      console.log(
        `%c⚠️ Missing translation for: ${
          descriptor?.defaultMessage || 'No defaultMessage defined'
        } (${descriptor?.id || 'No ID defined'})`,
        'color: orange'
      )
    }
  } else {
    console.error(error)
  }
}

const TranslationProvider: React.FC<TranslationProviderProps> = ({
  children,
}) => {
  const locale = useCurrentLocale()

  return (
    <IntlProvider
      messages={messages}
      locale={locale}
      defaultLocale={DEFAULT_LOCALE}
      fallbackOnEmptyString={true}
      onError={handleTranslationError}
    >
      {children}
    </IntlProvider>
  )
}

export default TranslationProvider

type IntlError = MissingTranslationError | MessageFormatError | MissingDataError | InvalidConfigError | UnsupportedFormatterError | FormatError