import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';

const meta: Meta<typeof ExpressiveMoneyInput> = {
  component: ExpressiveMoneyInput,
  tags: ['!autodocs', '!manifest'],
  title: 'Forms/ExpressiveMoneyInput/Tests',
  args: {
    label: 'You send',
    currency: 'GBP',
    amount: 1234.56,
    currencySelector: undefined,
  },
};
export default meta;

type Story = StoryObj<ExpressiveMoneyInputProps>;

export const WithAutofocus: Story = {
  args: {
    autoFocus: true,
  },
};

const locales = [
  { lang: 'en', label: 'English', currency: 'GBP' },
  { lang: 'cs', label: 'Czech', currency: 'CZK' },
  { lang: 'de', label: 'German', currency: 'EUR' },
  { lang: 'es', label: 'Spanish', currency: 'EUR' },
  { lang: 'fr', label: 'French', currency: 'EUR' },
  { lang: 'hu', label: 'Hungarian', currency: 'HUF', supportsDecimals: false },
  { lang: 'id', label: 'Indonesian', currency: 'IDR', supportsDecimals: false },
  { lang: 'it', label: 'Italian', currency: 'EUR' },
  { lang: 'ja', label: 'Japanese', currency: 'JPY', supportsDecimals: false },
  { lang: 'nl', label: 'Dutch', currency: 'EUR' },
  { lang: 'pl', label: 'Polish', currency: 'PLN' },
  { lang: 'pt', label: 'Portuguese', currency: 'EUR' },
  { lang: 'ro', label: 'Romanian', currency: 'RON' },
  { lang: 'ru', label: 'Russian', currency: 'RUB' },
  { lang: 'th', label: 'Thai', currency: 'THB' },
  { lang: 'tr', label: 'Turkish', currency: 'TRY' },
  { lang: 'uk', label: 'Ukrainian', currency: 'UAH' },
  { lang: 'zh-CN', label: 'Simplified Chinese', currency: 'CNY' },
  { lang: 'zh-HK', label: 'Traditional Chinese', currency: 'HKD' },
];

/**
 * Verifies that the .wds-text-display--forced class correctly overrides locale-specific
 * font restrictions (ja, zh-HK, zh-CN, th) so amounts render in Wise Sans across all
 * supported locales. Each row represents a different language context.
 */
export const LocaleFontOverride = () => (
  <>
    {locales.map(({ lang, label, currency, supportsDecimals = true }) => (
      <div key={lang} lang={lang} className="m-b-4">
        <ExpressiveMoneyInput
          label={`${label} locale (${lang})`}
          currency={currency}
          amount={supportsDecimals ? 1234.56 : 123456}
          onAmountChange={fn()}
        />
      </div>
    ))}
  </>
);
