i18n

/**
 * Switch language: i18n.locale(code) re-translates the page; Polish arrives through load().
 */
export function mount(root) {
    const {i18n} = Domma;
    const $root = $(root);

    i18n.add('en', {lang: {hello: 'Hello - this page is in English.'}});
    i18n.add('fr', {lang: {hello: 'Bonjour - cette page est en français.'}});
    i18n.add('de', {lang: {hello: 'Hallo - diese Seite ist auf Deutsch.'}});
    i18n.add('ar', {lang: {hello: 'مرحبًا - هذه الصفحة بالعربية.'}});

    // Polish is loaded on first use. load() takes a URL ('/lang/{locale}.json') or, as here, a loader function.
    const polish = () => Promise.resolve({lang: {hello: 'Cześć - ta strona jest po polsku.'}});

    // The locale is global: remember it (and <html lang dir>) so teardown can put it back.
    const html = $('html');
    const before = {locale: i18n.locale(), lang: html.attr('lang'), dir: html.attr('dir')};

    const showState = () => {
        $root.find('#lang-current').text(i18n.locale());
        $root.find('#lang-dir').text(i18n.dir());
        $root.find('#lang-switch button').each(function () {
            const on = $(this).data('lang') === i18n.locale();
            $(this).toggleClass('active', on).attr('aria-pressed', on ? 'true' : 'false');
        });
    };
    const stopListening = i18n.on('change', showState);

    $root.find('#lang-switch button').on('click', async function () {
        const code = $(this).data('lang');
        if (code === 'pl') await i18n.load('pl', polish);
        i18n.locale(code);
    });

    i18n.translate(root);
    showState();

    return () => {
        stopListening();
        i18n.locale(before.locale);
        for (const name of ['lang', 'dir']) {
            if (before[name] == null) html.removeAttr(name);
            else html.attr(name, before[name]);
        }
    };
}

/**
 * Welcome to the shop: a card translated entirely by data-i18n attributes. Switch language above.
 */
export function mount(root) {
    const {i18n} = Domma;

    i18n.add('en', {shop: {
        title: 'Welcome to the shop',
        intro: 'Everything on this card comes from data-i18n attributes.',
        signedIn: 'Signed in as <strong>{name}</strong>',
        items: {'=0': 'Your cart is empty', one: '{count} item in your cart', other: '{count} items in your cart'},
        searchLabel: 'Search',
        searchPlaceholder: 'Search products',
        searchHint: 'Type a product name',
        onlyInEnglish: 'This line is only written in English - it falls back.'
    }});
    i18n.add('fr', {shop: {
        title: 'Bienvenue dans la boutique',
        intro: 'Tout le contenu de cette carte vient des attributs data-i18n.',
        signedIn: 'Connecté en tant que <strong>{name}</strong>',
        items: {'=0': 'Votre panier est vide', one: '{count} article dans votre panier', other: '{count} articles dans votre panier'},
        searchLabel: 'Rechercher',
        searchPlaceholder: 'Rechercher des produits',
        searchHint: 'Saisissez un nom de produit'
    }});
    i18n.add('de', {shop: {
        title: 'Willkommen im Shop',
        intro: 'Alles auf dieser Karte stammt aus data-i18n-Attributen.',
        signedIn: 'Angemeldet als <strong>{name}</strong>',
        items: {'=0': 'Ihr Warenkorb ist leer', one: '{count} Artikel im Warenkorb', other: '{count} Artikel im Warenkorb'},
        searchLabel: 'Suche',
        searchPlaceholder: 'Produkte suchen',
        searchHint: 'Produktnamen eingeben'
    }});
    i18n.add('ar', {shop: {
        title: 'مرحبًا بك في المتجر',
        intro: 'كل ما في هذه البطاقة يأتي من سمات data-i18n.',
        signedIn: 'تم تسجيل الدخول باسم <strong>{name}</strong>',
        items: {zero: 'سلتك فارغة', one: 'عنصر واحد في سلتك', two: 'عنصران في سلتك', few: '{count} عناصر في سلتك', many: '{count} عنصرًا في سلتك', other: '{count} عنصر في سلتك'},
        searchLabel: 'بحث',
        searchPlaceholder: 'ابحث عن المنتجات',
        searchHint: 'اكتب اسم المنتج'
    }});
    i18n.add('pl', {shop: {
        title: 'Witamy w sklepie',
        intro: 'Wszystko na tej karcie pochodzi z atrybutów data-i18n.',
        signedIn: 'Zalogowano jako <strong>{name}</strong>',
        items: {'=0': 'Koszyk jest pusty', one: '{count} przedmiot w koszyku', few: '{count} przedmioty w koszyku', many: '{count} przedmiotów w koszyku', other: '{count} przedmiotu w koszyku'},
        searchLabel: 'Szukaj',
        searchPlaceholder: 'Szukaj produktów',
        searchHint: 'Wpisz nazwę produktu'
    }});

    // Keys a locale lacks (shop.onlyInEnglish) come from English. fallback() is global, so teardown restores it.
    const fallbacks = i18n.fallback();
    if (!fallbacks.includes('en')) i18n.fallback([...fallbacks, 'en']);

    // i18n.locale(code) re-translates the whole document; this fills the card for the locale already set.
    i18n.translate(root);

    return () => i18n.fallback(fallbacks);
}

/**
 * Plurals and ordinals: params.count picks the form through Intl.PluralRules, in the current locale.
 */
export function mount(root) {
    const {i18n} = Domma;
    const $root = $(root);

    i18n.add('en', {
        cart: {items: {'=0': 'Your cart is empty', one: '{count} item', other: '{count} items'}},
        race: {place: {ordinal: true, one: '{count}st', two: '{count}nd', few: '{count}rd', other: '{count}th'}}
    });
    i18n.add('fr', {
        cart: {items: {'=0': 'Votre panier est vide', one: '{count} article', other: '{count} articles'}},
        race: {place: {ordinal: true, one: '{count}er', other: '{count}e'}}
    });
    i18n.add('de', {
        cart: {items: {'=0': 'Ihr Warenkorb ist leer', one: '{count} Artikel', other: '{count} Artikel'}},
        race: {place: {ordinal: true, other: '{count}.'}}
    });
    i18n.add('ar', {
        cart: {items: {zero: 'لا توجد عناصر', one: 'عنصر واحد', two: 'عنصران', few: '{count} عناصر', many: '{count} عنصرًا', other: '{count} عنصر'}},
        race: {place: {ordinal: true, other: 'المركز {count}'}}
    });
    i18n.add('pl', {
        cart: {items: {'=0': 'Koszyk jest pusty', one: '{count} przedmiot', few: '{count} przedmioty', many: '{count} przedmiotów', other: '{count} przedmiotu'}},
        race: {place: {ordinal: true, other: '{count}.'}}
    });

    const render = () => {
        const count = Math.max(0, parseInt($root.find('#plural-count').val(), 10) || 0);
        $root.find('#plural-locale').text(i18n.locale());
        $root.find('#out-items').text(i18n.t('cart.items', {count}));
        $root.find('#out-place').text(i18n.t('race.place', {count: Math.max(1, count)}));
    };

    $root.find('#plural-count').on('input', render);
    const stopListening = i18n.on('change', render);
    render();

    return stopListening;
}

/**
 * Placeholders and escaping: t() returns text, html() keeps the message's markup and escapes the params.
 */
export function mount(root) {
    const {i18n} = Domma;
    const $root = $(root);

    i18n.add('en', {greet: {hello: 'Hello, {name}!', signedIn: 'Signed in as <strong>{name}</strong>'}});
    i18n.add('fr', {greet: {hello: 'Bonjour, {name} !', signedIn: 'Connecté en tant que <strong>{name}</strong>'}});
    i18n.add('de', {greet: {hello: 'Hallo, {name}!', signedIn: 'Angemeldet als <strong>{name}</strong>'}});
    i18n.add('ar', {greet: {hello: 'مرحبًا، {name}!', signedIn: 'تم تسجيل الدخول باسم <strong>{name}</strong>'}});
    i18n.add('pl', {greet: {hello: 'Cześć, {name}!', signedIn: 'Zalogowano jako <strong>{name}</strong>'}});

    const render = () => {
        const name = $root.find('#escape-name').val();
        // Plain text: put it in with .text(), never .html().
        $root.find('#out-t').text(i18n.t('greet.hello', {name}));
        // HTML with the name escaped: show the source, then render it.
        const html = i18n.html('greet.signedIn', {name});
        $root.find('#out-html-src').text(html);
        $root.find('#out-html').html(html);
    };

    $root.find('#escape-name').on('input', render);
    const stopListening = i18n.on('change', render);
    render();

    return stopListening;
}

/**
 * Formatting: cached Intl formatters in the current locale. Switch language above to see them change.
 */
export function mount(root) {
    const {i18n} = Domma;
    const $root = $(root);

    const formats = {
        number: () => i18n.number(1234567.891),
        percent: () => i18n.number(0.256, {style: 'percent'}),
        currency: () => i18n.currency(1499.5, 'EUR'),
        date: () => i18n.date(D(), {dateStyle: 'full'}),
        dateTime: () => i18n.date(D().subtract(3, 'day'), {dateStyle: 'medium', timeStyle: 'short'}),
        yesterday: () => i18n.relative(-1, 'day', {numeric: 'auto'}),
        inHours: () => i18n.relative(3, 'hour'),
        list: () => i18n.list(['Ann', 'Bo', 'Cy'])
    };

    const render = () => {
        $root.find('#fmt-locale').text(i18n.locale());
        $root.find('[data-fmt]').each(function () {
            $(this).text(formats[$(this).data('fmt')]());
        });
    };

    const stopListening = i18n.on('change', render);
    render();

    return stopListening;
}