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

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

import { Button } from './button';

declare let module;

const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }];

const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: '#a511dc' }];

storiesOf('Button', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Primary" usage="The primary button.">
        <Button preset="primary" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Primary accent" usage="The primary accent button.">
        <Button preset="primary-accent" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Secondary" usage="The secondary button.">
        <Button preset="secondary" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Secondary accent" usage="The secondary accent button.">
        <Button preset="secondary-accent" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Success" usage="The success button.">
        <Button preset="success" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Success accent" usage="The success accent button.">
        <Button preset="success-accent" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Warning" usage="The warning button.">
        <Button preset="warning" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Warning accent" usage="The warning accent button.">
        <Button preset="warning-accent" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Error" usage="The error button.">
        <Button preset="error" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Error accent" usage="The error accent button.">
        <Button preset="error-accent" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Link" usage="The link button.">
        <Button preset="link" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Disabled" usage="The disabled behavior of the primary button.">
        <Button disabled preset="primary" text="Click It" onPress={() => Alert.alert('pressed')} />
      </UseCase>
      <UseCase text="Array Style" usage="Button with array style">
        <Button
          preset="primary"
          style={buttonStyleArray}
          text="Click It"
          textStyle={buttonTextStyleArray}
          onPress={() => Alert.alert('pressed')}
        />
      </UseCase>
    </Story>
  ))
  .add('Transforming', () => (
    <Story>
      <UseCase text="Capitalize" usage="Capitalize first letter of the sentence">
        <Button preset="primary" text="click it" textTransform="capitalize" />
      </UseCase>
      <UseCase text="Emphasize" usage="Capitalize first letter of each word">
        <Button preset="primary" text="click it" textTransform="emphasize" />
      </UseCase>
      <UseCase text="Uppercase" usage="Capitalize the entire text">
        <Button preset="primary" text="click it" textTransform="uppercase" />
      </UseCase>
    </Story>
  ));
