import { storiesOf } from '@storybook/react-native';
import * as React from 'react';

import { Text } from '~/components';
import { StoryScreen, Story, UseCase } from '~/storybook/views';

import { typography } from './typography';

const TEXT = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
const STYLE = {
  fontFamily: typography.fonts.regular,
  fontSize: typography.fontSize[8],
};
storiesOf('Typography', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Inter font', () => (
    <Story>
      <UseCase text="thin" usage="Font thin">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.thin }]} text={TEXT} />
      </UseCase>
      <UseCase text="extraLight" usage="Font extraLight">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.extraLight }]} text={TEXT} />
      </UseCase>
      <UseCase text="light" usage="Font light">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.light }]} text={TEXT} />
      </UseCase>
      <UseCase text="Regular" usage="Font regular">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.regular }]} text={TEXT} />
      </UseCase>
      <UseCase text="medium" usage="Font medium">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.medium }]} text={TEXT} />
      </UseCase>
      <UseCase text="semiBold" usage="Font semiBold">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.semiBold }]} text={TEXT} />
      </UseCase>
      <UseCase text="bold" usage="Font bold">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.bold }]} text={TEXT} />
      </UseCase>
      <UseCase text="extraBold" usage="Font extraBold">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.extraBold }]} text={TEXT} />
      </UseCase>
      <UseCase text="black" usage="Font black">
        <Text style={[STYLE, { fontWeight: typography.fontWeight.black }]} text={TEXT} />
      </UseCase>
    </Story>
  ));
