import React, { useEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Button } from '.';

storiesOf('Button', module)
   .add('default', () => {
      return (
         <>
            <View style={{ padding: 10 }}>
               <Button variant="primary">Primary</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="secondary">Secondary</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="success">Success</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="warning">Warning</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="danger">Danger</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="info">Info</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="light">Light</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="dark">Dark</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button variant="link">Link</Button>
            </View>
         </>
      );
   })
   .add('outline', () => {
      return (
         <>
            <View style={{ padding: 10 }}>
               <Button outline variant="primary">
                  Primary
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="secondary">
                  Secondary
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="success">
                  Success
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="warning">
                  Warning
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="danger">
                  Danger
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="info">
                  Info
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="light">
                  Light
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="dark">
                  Dark
               </Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button outline variant="link">
                  Link
               </Button>
            </View>
         </>
      );
   })
   .add('rounded', () => {
      return (
         <>
            <View style={{ padding: 10 }}>
               <Button rounded>Rounded</Button>
            </View>
         </>
      );
   })
   .add('size', () => {
      return (
         <>
            <View style={{ padding: 10 }}>
               <Button size="sm">Small</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button size="md">Medium</Button>
            </View>
            <View style={{ padding: 10 }}>
               <Button size="lg">Large</Button>
            </View>
         </>
      );
   });
