import { jsx } from 'react/jsx-runtime';
import { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
import { getI18n, LOCALE_NAMES, SUPPORTED_LOCALES } from './I18n.js';

/* ── Context ──────────────────────────────────────────────────── */
const I18nContext = createContext(null);
/**
 * Provider component to supply a custom I18nManager to the tree.
 * If not used, the global singleton (getI18n()) is used automatically.
 */
function I18nProvider({ i18n, children, }) {
    return jsx(I18nContext.Provider, { value: i18n, children: children });
}
/**
 * React hook for translations.
 *
 * @param defaultNamespace - Optional default namespace prefix
 * @returns Translation utilities
 *
 * @example
 * // Without namespace
 * const { t } = useTranslation();
 * t('engine:editor.tools.select');
 *
 * @example
 * // With default namespace
 * const { t } = useTranslation('engine');
 * t('editor.tools.select'); // auto-prefixed to 'engine:editor.tools.select'
 */
function useTranslation(defaultNamespace) {
    const contextI18n = useContext(I18nContext);
    const i18n = contextI18n !== null && contextI18n !== void 0 ? contextI18n : getI18n();
    const [locale, setLocaleState] = useState(i18n.getLocale());
    const nsRef = useRef(defaultNamespace);
    nsRef.current = defaultNamespace;
    // Re-render when locale changes
    useEffect(() => {
        const unsub = i18n.events.on('locale:changed', (data) => {
            const d = data;
            setLocaleState(d.to);
        });
        return unsub;
    }, [i18n]);
    // Translate with optional namespace prefix
    const t = useCallback((key, values) => {
        const ns = nsRef.current;
        const fullKey = ns && !key.includes(':') ? `${ns}:${key}` : key;
        return i18n.t(fullKey, values);
    }, [i18n]);
    const setLocale = useCallback((newLocale) => {
        i18n.setLocale(newLocale);
    }, [i18n]);
    const isRTL = i18n.isRTL();
    const localeName = useCallback((loc) => { var _a; return (_a = LOCALE_NAMES[loc]) !== null && _a !== void 0 ? _a : loc; }, []);
    const formatNumber = useCallback((value, options) => i18n.formatNumber(value, options), [i18n]);
    const formatDate = useCallback((date, options) => i18n.formatDate(date, options), [i18n]);
    return {
        t,
        locale,
        setLocale,
        isRTL,
        i18n,
        locales: SUPPORTED_LOCALES,
        localeName,
        formatNumber,
        formatDate,
    };
}
/* ── TranslatedText component ─────────────────────────────────── */
/**
 * Declarative translated text component.
 *
 * @example
 * <TranslatedText tKey="game:hud.score" values={{ score: 100 }} />
 * <TranslatedText tKey="editor:tools.select" as="h2" />
 */
function TranslatedText({ tKey, values, ns, as: Tag = 'span', className, style, }) {
    const { t } = useTranslation(ns);
    return jsx(Tag, { className: className, style: style, children: t(tKey, values) });
}
/* ── LocaleSelect component ───────────────────────────────────── */
/**
 * Dropdown for switching locale.
 *
 * @example
 * <LocaleSelect />
 * <LocaleSelect showNativeName />
 */
function LocaleSelect({ showNativeName = true, className, style, } = {}) {
    const { locale, setLocale, locales, localeName } = useTranslation();
    return (jsx("select", { value: locale, onChange: e => setLocale(e.target.value), className: className, style: style, "aria-label": "Select language", children: locales.map(loc => (jsx("option", { value: loc, children: showNativeName ? localeName(loc) : loc.toUpperCase() }, loc))) }));
}

export { I18nProvider, LocaleSelect, TranslatedText, useTranslation };
//# sourceMappingURL=useTranslation.js.map
