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

import { Icon } from '~/components';
import { FadeInOutAnimation } from '~/components/animations/fade-in-out-animation';
import { SpinAnimation } from '~/components/animations/spin-animation';
import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color } from '~/theme';

import { Text } from '../text';

import { FadeAnimation } from './fade-animation';

declare let module;

const VIEW_STYLE: ViewStyle = { padding: 10, backgroundColor: color.success };
const TEXT_STYLE: TextStyle = { color: 'white' };

const DummyComponent: React.FC = () => (
  <View style={VIEW_STYLE}>
    <Text style={TEXT_STYLE} text="Lorem ipsum" />
  </View>
);

storiesOf('Animations', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Animations', () => (
    <Story>
      <UseCase text="Spin" usage="The content spins.">
        <SpinAnimation height={32} width={32}>
          <Icon color={color.active} name="loader" size={32} />
        </SpinAnimation>
      </UseCase>
      <UseCase text="Fade in" usage="The content fade in.">
        <FadeAnimation animation="fadeIn" duration={3000}>
          <DummyComponent />
        </FadeAnimation>
      </UseCase>
      <UseCase text="Fade out" usage="The content fade out.">
        <FadeAnimation animation="fadeOut" duration={3000}>
          <DummyComponent />
        </FadeAnimation>
      </UseCase>
      <UseCase text="Fade in-out" usage="The content fade in, wait some time and fade out.">
        <FadeInOutAnimation duration={3000} visibleTime={1500}>
          <DummyComponent />
        </FadeInOutAnimation>
      </UseCase>
    </Story>
  ));
