Internationalization

/**
 * Format a message using ICU message format
 * @param messageDescriptor - Message descriptor with id and default message
 * @param values - Variable values for message interpolation
 * @returns Formatted message string
 */
function formatMessage(
  messageDescriptor: MessageDescriptor,
  values?: { [key: string]: MessageValue }
): string;

/**
 * Format HTML message with embedded HTML tags
 * @param messageDescriptor - Message descriptor with id and default message  
 * @param values - Variable values for message interpolation
 * @returns Formatted HTML message string
 */
function formatHTMLMessage(
  messageDescriptor: MessageDescriptor,
  values?: { [key: string]: MessageValue }
): string;

/**
 * Message descriptor interface for defining translatable messages
 */
interface MessageDescriptor {
  id: string;
  description?: string;
  defaultMessage?: string;
}

type MessageValue = string | number | boolean | Date | null | undefined;

import { formatMessage, MessageDescriptor } from 'umi-types';

// Basic message formatting
const welcomeMessage: MessageDescriptor = {
  id: 'welcome.message',
  defaultMessage: 'Welcome to {appName}!',
  description: 'Welcome message shown to users',
};

const formattedMessage = formatMessage(welcomeMessage, {
  appName: 'My App',
});
// Result: "Welcome to My App!"

// Complex message with pluralization
const itemCountMessage: MessageDescriptor = {
  id: 'items.count',
  defaultMessage: '{count, plural, =0 {No items} one {# item} other {# items}}',
};

const countMessage = formatMessage(itemCountMessage, { count: 5 });
// Result: "5 items"

// Date and time in messages
const lastUpdatedMessage: MessageDescriptor = {
  id: 'last.updated',
  defaultMessage: 'Last updated on {date, date, medium} at {date, time, short}',
};

const updatedMessage = formatMessage(lastUpdatedMessage, {
  date: new Date(),
});

/**
 * Format a date according to locale and options
 * @param value - Date value to format
 * @param options - Date formatting options
 * @returns Formatted date string
 */
function formatDate(value: DateSource, options?: DateTimeFormatProps): string;

/**
 * Format a time according to locale and options
 * @param value - Date value to format as time
 * @param options - Time formatting options
 * @returns Formatted time string
 */
function formatTime(value: DateSource, options?: DateTimeFormatProps): string;

/**
 * Format relative time (e.g., "2 hours ago")
 * @param value - Date value to format relatively
 * @param options - Relative formatting options
 * @returns Formatted relative time string
 */
function formatRelative(
  value: DateSource,
  options?: FormattedRelativeProps & { now?: any }
): string;

type DateSource = Date | string | number;

interface DateTimeFormatProps extends Intl.DateTimeFormatOptions {
  format?: string;
}

interface FormattedRelativeProps {
  units?: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year';
  style?: 'best-fit' | 'numeric';
  format?: string;
  updateInterval?: number;
  initialNow?: any;
}

interface FormattedPluralBase {
  style?: 'cardinal' | 'ordinal';
}

interface FormattedPluralProps extends FormattedPluralBase {
  other?: any;
  zero?: any;
  one?: any;
  two?: any;
  few?: any;
  many?: any;
}

import { formatDate, formatTime, formatRelative } from 'umi-types';

const now = new Date();
const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);

// Date formatting
const shortDate = formatDate(now, { 
  year: 'numeric', 
  month: 'short', 
  day: 'numeric' 
});
// Result: "Sep 5, 2025"

const longDate = formatDate(now, { 
  weekday: 'long',
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
});
// Result: "Thursday, September 5, 2025"

// Time formatting
const shortTime = formatTime(now, { 
  hour: '2-digit', 
  minute: '2-digit' 
});
// Result: "15:30"

const longTime = formatTime(now, { 
  hour: '2-digit', 
  minute: '2-digit', 
  second: '2-digit',
  timeZoneName: 'short'
});
// Result: "15:30:45 UTC"

// Relative time formatting
const relativeTime = formatRelative(yesterday);
// Result: "1 day ago"

const relativeHours = formatRelative(new Date(Date.now() - 2 * 60 * 60 * 1000), {
  units: 'hour'
});
// Result: "2 hours ago"

/**
 * Format a number according to locale and options
 * @param value - Number value to format
 * @param options - Number formatting options
 * @returns Formatted number string
 */
function formatNumber(value: number, options?: FormattedNumberProps): string;

/**
 * Format plural forms based on number value
 * @param value - Number value for plural determination
 * @param options - Plural formatting options
 * @returns Plural form key
 */
function formatPlural(
  value: number,
  options?: FormattedPluralBase
): keyof FormattedPluralProps;

interface FormattedNumberProps extends Intl.NumberFormatOptions {
  format?: string;
}

interface FormattedPluralBase {
  style?: 'cardinal' | 'ordinal';
}

interface FormattedPluralProps extends FormattedPluralBase {
  other?: any;
  zero?: any;
  one?: any;
  two?: any;
  few?: any;
  many?: any;
}

import { formatNumber, formatPlural } from 'umi-types';

// Basic number formatting
const price = formatNumber(1234.56, {
  style: 'currency',
  currency: 'USD',
});
// Result: "$1,234.56"

const percentage = formatNumber(0.1234, {
  style: 'percent',
  minimumFractionDigits: 2,
});
// Result: "12.34%"

const largeNumber = formatNumber(1234567, {
  notation: 'compact',
  compactDisplay: 'short',
});
// Result: "1.2M"

// Plural formatting
const pluralForm = formatPlural(5, { style: 'cardinal' });
// Result: "other"

const ordinalForm = formatPlural(3, { style: 'ordinal' });
// Result: "few" (for "3rd")

/**
 * React component for formatting dates
 */
class FormattedDate extends React.Component<FormattedDateProps> {}

interface FormattedDateProps extends DateTimeFormatProps {
  value: DateSource;
  children?: (formattedDate: string) => React.ReactNode;
}

/**
 * React component for formatting times
 */
class FormattedTime extends React.Component<FormattedTimeProps> {}

interface FormattedTimeProps extends DateTimeFormatProps {
  value: DateSource;
  children?: (formattedDate: string) => React.ReactNode;
}

/**
 * React component for formatting relative times
 */
class FormattedRelative extends React.Component<
  FormattedRelativeProps & {
    value: DateSource;
    children?: (formattedRelative: string) => React.ReactNode;
  }
> {}

/**
 * React component for formatting messages
 */
class FormattedMessage extends React.Component<FormattedMessageProps> {}

interface FormattedMessageProps extends MessageDescriptor {
  values?: { [key: string]: MessageValue | JSX.Element };
  tagName?: string;
  children?: (...formattedMessage: Array<string | JSX.Element>) => React.ReactNode;
}

/**
 * React component for formatting HTML messages
 */
class FormattedHTMLMessage extends React.Component<FormattedMessageProps> {}

/**
 * React component for formatting numbers
 */
class FormattedNumber extends React.Component<
  FormattedNumberProps & {
    value: number;
    children?: (formattedNumber: string) => React.ReactNode;
  }
> {}

/**
 * React component for formatting plurals
 */
class FormattedPlural extends React.Component<
  FormattedPluralProps & {
    value: number;
    children?: (formattedPlural: React.ReactNode) => React.ReactNode;
  }
> {}

import React from 'react';
import { 
  FormattedMessage, 
  FormattedDate, 
  FormattedTime, 
  FormattedNumber,
  FormattedRelative 
} from 'umi-types';

// Message component usage
const WelcomeMessage = ({ userName }: { userName: string }) => (
  <FormattedMessage
    id="welcome.user"
    defaultMessage="Welcome, {name}!"
    values={{ name: <strong>{userName}</strong> }}
  />
);

// Date and time components
const DateTimeDisplay = ({ date }: { date: Date }) => (
  <div>
    <p>
      Date: <FormattedDate value={date} year="numeric" month="long" day="numeric" />
    </p>
    <p>
      Time: <FormattedTime value={date} hour="2-digit" minute="2-digit" />
    </p>
    <p>
      Relative: <FormattedRelative value={date} />
    </p>
  </div>
);

// Number formatting
const PriceDisplay = ({ price }: { price: number }) => (
  <FormattedNumber
    value={price}
    style="currency"
    currency="USD"
  />
);

// Advanced message with render prop
const ItemCount = ({ count }: { count: number }) => (
  <FormattedMessage
    id="items.count"
    defaultMessage="{count, plural, =0 {No items} one {# item} other {# items}}"
    values={{ count }}
  >
    {(formattedMessage) => (
      <span className="item-count">{formattedMessage}</span>
    )}
  </FormattedMessage>
);

// HTML message component
const RichTextMessage = () => (
  <FormattedHTMLMessage
    id="rich.message"
    defaultMessage="Click <a href='#'>here</a> to <strong>continue</strong>"
  />
);

/**
 * Set the current locale and optionally reload the page
 * @param lang - Language/locale code (e.g., 'en-US', 'zh-CN')
 * @param reloadPage - Whether to reload the page after locale change
 */
function setLocale(lang: string, reloadPage?: boolean): void;

/**
 * Get the current locale setting
 * @returns Current locale code
 */
function getLocale(): string;

/**
 * Get current timestamp in milliseconds
 * @returns Current timestamp
 */
function now(): number;

/**
 * Handle internationalization errors
 * @param error - Error message
 */
function onError(error: string): void;

import { setLocale, getLocale } from 'umi-types';

// Get current locale
const currentLocale = getLocale();
console.log('Current locale:', currentLocale); // e.g., "en-US"

// Switch locale without page reload
setLocale('zh-CN', false);

// Switch locale with page reload
setLocale('en-US', true);

// Locale switcher component
const LocaleSwitcher = () => {
  const current = getLocale();
  
  const handleLocaleChange = (locale: string) => {
    setLocale(locale, false);
  };
  
  return (
    <select value={current} onChange={(e) => handleLocaleChange(e.target.value)}>
      <option value="en-US">English</option>
      <option value="zh-CN">中文</option>
    </select>
  );
};

// Plugin locale management
export default (api: IApi) => {
  // Add locale files
  api.addLocales({
    'en-US': {
      'my.plugin.title': 'My Plugin',
      'my.plugin.description': 'This is my awesome plugin',
    },
    'zh-CN': {
      'my.plugin.title': '我的插件',
      'my.plugin.description': '这是我的超棒插件',
    },
  });
  
  // Use formatted messages
  api.log.info(
    formatMessage({
      id: 'my.plugin.loaded',
      defaultMessage: 'Plugin loaded successfully',
    })
  );
};

/**
 * Internationalization interface with formatting methods
 */
type PickIntl = Pick<
  typeof intl,
  | 'FormattedDate'
  | 'FormattedTime'
  | 'FormattedRelative'
  | 'FormattedNumber'
  | 'FormattedPlural'
  | 'FormattedMessage'
  | 'FormattedHTMLMessage'
  | 'formatMessage'
  | 'formatHTMLMessage'
  | 'formatDate'
  | 'formatTime'
  | 'formatRelative'
  | 'formatNumber'
  | 'formatPlural'
>;

type IIntl<T = PickIntl> = { [key in keyof T]: T[key] } & typeof intl.formatMessage;