import { Typography } from '../common';
import Money from '../money/Money';
import Title from '../title/Title';

import Display from './Display';

export default {
  title: 'Typography/Display',
  component: Display,
};

export const Basic = () => {
  const EN = 'compounding without subscription compounding without subscription'; // Made for hyphenation testing
  const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
  const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
  const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
  const ZN =
    '的一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年样能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去最性性齉龘龘靐齉爩鱻猋驫麤籲爨癵驫鲙鬯鬻厵纛';
  return (
    <>
      <div lang="en">
        <h1>🇬🇧</h1>
        Large
        <Display type={Typography.DISPLAY_LARGE}>{EN}</Display>
        <hr />
        Medium
        <Display type={Typography.DISPLAY_MEDIUM}>{EN}</Display>
        <hr />
        Small
        <Display type={Typography.DISPLAY_SMALL}>{EN}</Display>
      </div>
      <hr />
      <div lang="de">
        <h1>Languages with special symbols, e.g 🇩🇪</h1>
        Large
        <Display type={Typography.DISPLAY_LARGE}>
          {DE}
          <br />
          {DE}
        </Display>
        <hr />
        Medium
        <Display type={Typography.DISPLAY_MEDIUM}>
          {DE}
          <br />
          {DE}
        </Display>
        <hr />
        Small
        <Display type={Typography.DISPLAY_SMALL}>
          {DE}
          <br />
          {DE}
        </Display>
      </div>
      <hr />
      <div lang="uk">
        <h1>Greek + Cyrillic languages, e.g 🇺🇦</h1>
        Large
        <Display type={Typography.DISPLAY_LARGE}>
          {UA}
          <br />
          {UA}
        </Display>
        <hr />
        Medium
        <Display type={Typography.DISPLAY_MEDIUM}>
          {UA}
          <br />
          {UA}
        </Display>
        <hr />
        Small
        <Display type={Typography.DISPLAY_SMALL}>
          {UA}
          <br />
          {UA}
        </Display>
      </div>
      <hr />
      <div lang="ja">
        <h1>Japanese</h1>
        Large
        <Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
        <hr />
        Medium
        <Display type={Typography.DISPLAY_MEDIUM}>{JA}</Display>
        <hr />
        Small
        <Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
      </div>
      <hr />
      <div lang="zh-CN">
        <h1>Simplified Chinese</h1>
        Large
        <Display type={Typography.DISPLAY_LARGE}>{ZN}</Display>
        <hr />
        Medium
        <Display type={Typography.DISPLAY_MEDIUM}>{ZN}</Display>
        <hr />
        Small
        <Display type={Typography.DISPLAY_SMALL}>{ZN}</Display>
      </div>
    </>
  );
};

export const Numbers = () => {
  return (
    <>
      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
      <hr />
      <Display type={Typography.DISPLAY_NUMBER}>
        <Money amount={1050.6} currency="UAH" />
      </Display>
      <hr />
      <Display type={Typography.DISPLAY_NUMBER}>
        <Money amount={10.17} currency="JPY" />
      </Display>
      <hr />
      <Display type={Typography.DISPLAY_NUMBER}>
        <Money amount={0.01} currency="EUR" />
      </Display>
      <hr />
      <Display type={Typography.DISPLAY_NUMBER}>
        <Money amount={1000000} currency="EUR" />
      </Display>
      <hr />
      <Display type={Typography.DISPLAY_NUMBER}>
        <Money amount={1000000} currency="GBP" />
      </Display>
    </>
  );
};