import { action } from '@storybook/addon-actions'
import { storiesOf } from '@storybook/react-native'
import React from 'react'
import { ActivityIndicator, Text, View } from 'react-native'

import { colors } from '../../src/Colors'
import { AutoLayout } from '../../src/components/AutoLayout'
import { Button, ButtonType } from '../../src/components/Button'

const ButtonLabel: React.FC = ({ children }) => (
  <Text style={{ color: colors.white, marginBottom: 8, paddingLeft: 4 }}>
    {children}
  </Text>
)

const ButtonVariant = (props: { type: ButtonType }) => (
  <AutoLayout gap={16}>
    <View>
      <ButtonLabel>Active</ButtonLabel>
      <Button {...props} onPress={action('clicked-active-button')}>
        <Text>Click me</Text>
      </Button>
    </View>
    <View>
      <ButtonLabel>Muted</ButtonLabel>
      <Button {...props} muted onPress={action('clicked-muted-button')}>
        <Text>Can't click me</Text>
      </Button>
    </View>
    <View>
      <ButtonLabel>Loading</ButtonLabel>
      <Button {...props} onPress={action('clicked-loading-indicator')}>
        <ActivityIndicator />
      </Button>
    </View>
  </AutoLayout>
)

storiesOf('Button', module)
  .add('filled', () => <ButtonVariant type="filled" />)
  .add('chromeless', () => <ButtonVariant type="chromeless" />)