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

import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color, spacing } from '~/theme';

import { AppVersion } from './app-version';

const style = {
  paddingVertical: spacing[3],
  alignItems: 'center',
  backgroundColor: color.palette.malibu,
} as ViewStyle;
const textStyle = {
  color: color.palette.mexicanRed,
} as TextStyle;

storiesOf('AppVersion', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase text="default" usage="Used to show the app's version.">
        <AppVersion build="12" revision="34" version="56" />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase text="Style the view" usage="View with new style.">
        <AppVersion build="12" revision="34" version="56" {...{ style }} />
      </UseCase>
      <UseCase text="Style the text" usage="View with new style.">
        <AppVersion build="12" revision="34" version="56" {...{ textStyle }} />
      </UseCase>
    </Story>
  ));
