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

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

import { FeedbackBar } from './feedback-bar';
import { FeedbackFadingBar } from './feedback-fading-bar';

storiesOf('FeedbackBar', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage="Primary preset">
        <FeedbackBar
          message="Scan a space to add this item to it"
          preset="primary"
          title="Scan A Space"
        />
      </UseCase>
      <UseCase text="Secondary" usage="Secondary preset">
        <FeedbackBar
          message="Scan a space to add this item to it"
          preset="secondary"
          title="Scan A Space"
        />
      </UseCase>
      <UseCase text="Success" usage="Success preset">
        <FeedbackBar
          message="Scan a space to add this item to it"
          preset="success"
          title="Scan A Space"
        />
      </UseCase>
      <UseCase text="Warning" usage="Warning preset">
        <FeedbackBar
          message="Scan a space to add this item to it"
          preset="warning"
          title="Scan A Space"
        />
      </UseCase>
      <UseCase text="Error" usage="Error preset">
        <FeedbackBar
          message="Scan a space to add this item to it"
          preset="error"
          title="Scan A Space"
        />
      </UseCase>
    </Story>
  ))
  .add('Fading animation', () => (
    <Story>
      <UseCase text="Default fading" usage="Default fading bar">
        <FeedbackFadingBar
          duration={5000}
          message="Scan a space to add this item to it"
          preset="primary"
          title="Scan A Space"
          visibleTime={3000}
        />
      </UseCase>
      <UseCase text="Default props fading" usage="Default props fading bar">
        <FeedbackFadingBar
          message="Scan a space to add this item to it"
          preset="primary"
          title="Scan A Space"
        />
      </UseCase>
    </Story>
  ));
