import {
  MessageFormatter,
  pluralTypeHandler,
  selectTypeHandler,
} from '@ultraq/icu-message-formatter'
import {
  selectInitialLocale,
  selectIsLoading,
  selectLocale,
  selectTranslations,
} from 'domains/i18n/selectors'
import { useCallback } from 'preact/hooks'
import { useSelector } from 'react-redux'
// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
// safely use en-GB all the time.
const formatter: {
  format: (_translation: string, _values: object) => string
} = new MessageFormatter('en-GB', {
  plural: pluralTypeHandler,
  select: selectTypeHandler,
})

export function useI18n() {
  const translations = useSelector(selectTranslations)
  const userLocale = useSelector(selectLocale)
  const initialLocale = useSelector(selectInitialLocale)
  const isLoading = useSelector(selectIsLoading)

  const t = useCallback(
    (key: string, values = {}) => {
      if (!translations) return ''

      const translation = translations[key]
      if (!translation) {
        if (isLoading) return ''

        console.warn(
          `Translation key: ${key} is missing in locale: ${userLocale}`,
        )
        return ''
      }

      return formatter.format(translation, values)
    },
    [translations, userLocale, isLoading],
  )

  return {
    t,
    userLocale,
    initialLocale,
  }
}