import React, { createContext, useCallback, useContext, useMemo } from 'react'
import { createTranslator } from '@ossy/locale'

const LocaleContext = createContext(null)

const fallbackLocale = {
  language: 'en',
  messages: {},
  defaultLanguage: 'en',
  supportedLanguages: ['en'],
  t: (key) => key,
}

const isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'

/**
 * Provides merged translation catalog and `t()` lookup for the active request language.
 *
 * @param {{
 *   language?: string
 *   messages?: Record<string, string>
 *   fallbackMessages?: Record<string, string>
 *   defaultLanguage?: string
 *   supportedLanguages?: string[]
 *   children: import('react').ReactNode
 * }} props
 */
export function LocaleProvider ({
  language,
  messages = {},
  fallbackMessages,
  defaultLanguage,
  supportedLanguages,
  children,
}) {
  const onMissingKey = useMemo(
    () => (isDev
      ? (key) => {
          if (typeof console !== 'undefined' && typeof console.warn === 'function') {
            console.warn(`[@ossy/locale] Missing translation key: ${key}`)
          }
        }
      : undefined),
    [],
  )

  const t = useCallback(
    (key, params) => createTranslator(messages, { fallbackCatalog: fallbackMessages, onMissingKey })(key, params),
    [messages, fallbackMessages, onMissingKey],
  )

  const value = useMemo(
    () => ({
      language: language || defaultLanguage || 'en',
      messages,
      defaultLanguage,
      supportedLanguages,
      t,
    }),
    [language, messages, defaultLanguage, supportedLanguages, t],
  )

  return (
    <LocaleContext.Provider value={value}>
      {children}
    </LocaleContext.Provider>
  )
}

export function useLocale () {
  return useContext(LocaleContext) || fallbackLocale
}