// @flow
import React from 'react';
import { StyleSheet, View } from 'react-native';
import type { storiesOf as StoriesOf } from '@storybook/react';
import { Container } from '../common/';
import { Button } from '../../src/';

const styles = StyleSheet.create({
  list: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item: {
    margin: 16,
  },
});

export default function (storiesOf: StoriesOf) {
  storiesOf('Button', module)
    .addDecorator(story => <Container>{story()}</Container>)
    .add('Text Button', () => (
      <View style={styles.list}>
        <View style={styles.item}>
          <Button title="Baseline" />
        </View>
        <View style={styles.item}>
          <Button title="Compact" compact />
        </View>
        <View style={styles.item}>
          <Button title="Dense" dense />
        </View>
        <View style={styles.item}>
          <Button title="Primary" primary />
        </View>
        <View style={styles.item}>
          <Button title="Secondary" secondary />
        </View>
        <View style={styles.item}>
          <Button title="Link" href="/" />
        </View>
      </View>
    ))
    .add('Raised Button', () => (
      <View style={styles.list}>
        <View style={styles.item}>
          <Button raised title="Baseline" />
        </View>
        <View style={styles.item}>
          <Button raised title="Compact" compact />
        </View>
        <View style={styles.item}>
          <Button raised title="Dense" dense />
        </View>
        <View style={styles.item}>
          <Button raised title="Primary" primary />
        </View>
        <View style={styles.item}>
          <Button raised title="Secondary" secondary />
        </View>
        <View style={styles.item}>
          <Button raised title="Link" href="/" />
        </View>
      </View>
    ));
}
