ICU Message Format Support

import { Plural, Select, plural, select, date, time, number } from "react-i18next/icu.macro";

/**
 * Date formatting with ICU syntax (compile-time transformation)
 * @param strings - Template string array
 * @param variable - Date value to format
 * @returns Formatted date string
 */
function date(strings: TemplateStringsArray, variable: Date): string;

/**
 * Time formatting with ICU syntax (compile-time transformation)
 * @param strings - Template string array  
 * @param variable - Date value to format time from
 * @returns Formatted time string
 */
function time(strings: TemplateStringsArray, variable: Date): string;

/**
 * Number formatting with ICU syntax (compile-time transformation)
 * @param strings - Template string array
 * @param variable - Number value to format
 * @returns Formatted number string
 */
function number(strings: TemplateStringsArray, variable: number): string;

/**
 * Pluralization with ICU syntax (compile-time transformation)
 * @param strings - Template string array with plural forms
 * @param variable - Count value for pluralization
 * @param args - Additional interpolation values
 * @returns Pluralized string
 */
function plural(
  strings: TemplateStringsArray,
  variable: number,
  ...args: ValidInterpolations[]
): string;

/**
 * Ordinal selection with ICU syntax (compile-time transformation)
 * @param strings - Template string array with ordinal forms
 * @param variable - Number value for ordinal selection
 * @param args - Additional interpolation values
 * @returns Ordinal string
 */
function selectOrdinal(
  strings: TemplateStringsArray,
  variable: number,
  ...args: ValidInterpolations[]
): string;

/**
 * Value selection with ICU syntax (compile-time transformation)
 * @param strings - Template string array with selection options
 * @param variable - String value for selection
 * @param args - Additional interpolation values
 * @returns Selected string
 */
function select(
  strings: TemplateStringsArray,
  variable: string,
  ...args: ValidInterpolations[]
): string;

type ValidInterpolations = React.ReactElement | string;

import { plural, select, date, time, number } from "react-i18next/icu.macro";

// Pluralization
function ItemCounter({ count }) {
  const message = plural`You have ${count} {count, plural, 
    =0 {no items}
    one {# item}
    other {# items}
  }`;
  
  return <p>{message}</p>;
}

// Selection
function GenderGreeting({ person }) {
  const greeting = select`Hello ${person.name}, {${person.gender}, select,
    male {Mr. ${person.name}}
    female {Ms. ${person.name}}
    other {${person.name}}
  }`;
  
  return <span>{greeting}</span>;
}

// Date formatting
function EventDate({ event }) {
  const formatted = date`Event date: ${event.date}`;
  return <time>{formatted}</time>;
}

// Time formatting
function CurrentTime({ now }) {
  const timeStr = time`Current time: ${now}`;
  return <span>{timeStr}</span>;
}

// Number formatting
function Price({ amount }) {
  const price = number`Price: ${amount}`;
  return <span className="price">{price}</span>;
}

// Ordinal numbers
function Position({ rank }) {
  const position = selectOrdinal`You finished ${rank} {${rank}, selectordinal,
    one {#st}
    two {#nd}  
    few {#rd}
    other {#th}
  }`;
  
  return <div>{position}</div>;
}

// Complex example with multiple interpolations
function OrderStatus({ order, customer }) {
  const status = plural`Order for ${customer} has ${order.itemCount} {${order.itemCount}, plural,
    =0 {no items}
    one {# item}
    other {# items}  
  } and costs ${number`${order.total}`}`;
  
  return <p>{status}</p>;
}

/**
 * Pluralization component with props-based configuration
 * @param props - Plural component properties
 */
function Plural<
  T,
  Key extends ParseKeys<Ns, {}, ''>,
  Ns extends Namespace = TypeOptions['defaultNS']
>(props: PluralProps<T, Key, Ns> & NoChildren): ReactElement;

/**
 * Ordinal selection component with props-based configuration  
 * @param props - SelectOrdinal component properties
 */
function SelectOrdinal<
  T,
  Key extends ParseKeys<Ns, {}, ''>,
  Ns extends Namespace = TypeOptions['defaultNS']
>(props: PluralProps<T, Key, Ns> & NoChildren): ReactElement;

/**
 * Value selection component with props-based configuration
 * @param props - Select component properties
 */
function Select<
  Key extends ParseKeys<Ns, {}, ''>,
  Ns extends Namespace = TypeOptions['defaultNS']
>(props: SelectProps<Key, Ns>): ReactElement;

// Component prop interfaces
interface PluralSubProps<Key, Ns> {
  children?: never;
  i18nKey?: Key;
  i18n?: i18n;
  ns?: Ns;
  count: number;
  values?: {};
  zero?: string | ReactElement;
  one?: string | ReactElement;
  two?: string | ReactElement;
  few?: string | ReactElement;
  many?: string | ReactElement;
  other: string | ReactElement; // Required
}

type PluralProps<T, Key, Ns> = {
  [P in keyof T]: P extends keyof PluralSubProps<Key, Ns>
    ? PluralSubProps<Key, Ns>[P]
    : P extends `$${number}`
      ? string | ReactElement
      : never;
};

interface SelectProps<Key, Ns> {
  [key: string]: string | ReactElement;
  i18nKey?: Key;
  i18n?: i18n;
  ns?: Ns;
  other: string | ReactElement; // Required
  children?: never;
}

interface NoChildren {
  children?: never;
}

import { Plural, Select, SelectOrdinal } from "react-i18next/icu.macro";

// Plural component
function MessageCount({ count }) {
  return (
    <Plural
      i18nKey="messageCount"
      count={count}
      zero="No messages"
      one="One message"
      other="{{count}} messages"
    />
  );
}

// Select component  
function UserRole({ user }) {
  return (
    <Select
      i18nKey="userGreeting"
      role={user.role}
      admin="Welcome, Administrator!"
      user="Hello, User!"
      guest="Welcome, Guest!"
      other="Welcome!"
    />
  );
}

// SelectOrdinal component
function RankDisplay({ position }) {
  return (
    <SelectOrdinal
      i18nKey="ranking"
      count={position}
      one="{{count}}st place"
      two="{{count}}nd place"  
      few="{{count}}rd place"
      other="{{count}}th place"
    />
  );
}

// Complex plural with custom values
function OrderSummary({ order }) {
  return (
    <div>
      <Plural
        i18nKey="orderItems"
        count={order.items.length}
        values={{ 
          customerName: order.customer,
          orderDate: order.date
        }}
        zero="Order for {{customerName}} on {{orderDate}} has no items"
        one="Order for {{customerName}} on {{orderDate}} has {{count}} item"
        other="Order for {{customerName}} on {{orderDate}} has {{count}} items"
      />
    </div>
  );
}

// Dynamic select options
function StatusBadge({ status, options }) {
  const selectProps = {
    i18nKey: "status",
    status: status,
    other: "Unknown status",
    ...options // Dynamic options like { active: "Active", inactive: "Inactive" }
  };
  
  return <Select {...selectProps} />;
}

// With namespace
function LocalizedPlural({ count }) {
  return (
    <Plural
      ns="commerce"
      i18nKey="cartItems"
      count={count}
      zero="Empty cart"
      one="{{count}} item in cart"
      other="{{count}} items in cart"
    />
  );
}

/**
 * Runtime fallback functions (return empty strings when macros not processed)
 * Available from main react-i18next import
 */
const date: () => string;
const time: () => string;
const number: () => string;
const select: () => string;
const plural: () => string;
const selectOrdinal: () => string;

import { date, time, number, plural } from "react-i18next";

// These return empty strings at runtime if macros aren't processed
function Fallbacks() {
  return (
    <div>
      <p>{date()}</p>        {/* Returns "" */}
      <p>{time()}</p>        {/* Returns "" */}
      <p>{number()}</p>      {/* Returns "" */}
      <p>{plural()}</p>      {/* Returns "" */}
    </div>
  );
}

// babel.config.js
module.exports = {
  plugins: [
    'macros', // or 'babel-plugin-macros'
  ],
};

// .babelrc
{
  "plugins": ["macros"]
}

// Source code with ICU macro
const message = plural`You have ${count} {count, plural,
  =0 {no items}
  one {# item}
  other {# items}
}`;

// Generated translation entry
{
  "generated_plural_key": "You have {{count}} {{count, plural, =0{no items} one{# item} other{# items}}}"
}

import { useTranslation } from "react-i18next";
import { plural, select } from "react-i18next/icu.macro";

function MixedExample({ user, itemCount }) {
  const { t } = useTranslation();
  
  // Regular i18next
  const welcome = t('welcome', { name: user.name });
  
  // ICU macro
  const items = plural`You have ${itemCount} {${itemCount}, plural,
    =0 {no items}
    one {# item}
    other {# items}
  }`;
  
  const greeting = select`{${user.type}, select,
    premium {Welcome, Premium Member!}
    standard {Hello, Member!}
    other {Welcome!}
  }`;
  
  return (
    <div>
      <h1>{welcome}</h1>
      <p>{greeting}</p>
      <p>{items}</p>
    </div>
  );
}

// Feature detection for ICU support
const hasICUSupport = typeof Intl !== 'undefined' && Intl.PluralRules;

function AdaptiveComponent({ count }) {
  if (hasICUSupport) {
    return (
      <Plural
        count={count}
        zero="No items"
        one="One item"
        other="{{count}} items"
      />
    );
  }
  
  // Fallback to simple conditional
  const { t } = useTranslation();
  return <span>{t('itemCount', { count })}</span>;
}

// Type definitions for ICU macro components
type ICUInterpolation = string | React.ReactElement;

interface ICUPluralForms {
  zero?: ICUInterpolation;
  one?: ICUInterpolation;
  two?: ICUInterpolation;
  few?: ICUInterpolation;
  many?: ICUInterpolation;
  other: ICUInterpolation; // Always required
}

interface ICUSelectOptions {
  [key: string]: ICUInterpolation;
  other: ICUInterpolation; // Always required
}