import React, { useEffect, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { ITheme } from '../../types/theme.interface';
import { Button } from './index';

storiesOf('Components/Button', module)
   .add('colors', () => {
      return (
         <>
            <div className="m-2">
               <Button variant="primary">Primary</Button>
            </div>
            <div className="m-2">
               <Button variant="secondary">Secondary</Button>
            </div>
            <div className="m-2">
               <Button variant="success">Success</Button>
            </div>
            <div className="m-2">
               <Button variant="warning">Warning</Button>
            </div>
            <div className="m-2">
               <Button variant="danger">Danger</Button>
            </div>
            <div className="m-2">
               <Button variant="info">Info</Button>
            </div>
            <div className="m-2">
               <Button variant="light">Light</Button>
            </div>
            <div className="m-2">
               <Button variant="dark">Dark</Button>
            </div>
            <div className="m-2">
               <Button variant="link">Link</Button>
            </div>
         </>
      );
   })
   .add('outline', () => {
      return (
         <>
            <div className="m-2">
               <Button outline variant="primary">
                  Primary
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="secondary">
                  Secondary
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="success">
                  Success
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="warning">
                  Warning
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="danger">
                  Danger
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="info">
                  Info
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="light">
                  Light
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="dark">
                  Dark
               </Button>
            </div>
            <div className="m-2">
               <Button outline variant="link">
                  Link
               </Button>
            </div>
         </>
      );
   })
   .add('rounded', () => {
      return (
         <>
            <Button rounded variant="primary">
               Primary
            </Button>
            <Button rounded variant="secondary">
               Secondary
            </Button>
            <Button rounded variant="success">
               Success
            </Button>
            <Button rounded variant="warning">
               Warning
            </Button>
            <Button rounded variant="danger">
               Danger
            </Button>
            <Button rounded variant="info">
               Info
            </Button>
            <Button rounded variant="light">
               Light
            </Button>
            <Button rounded variant="dark">
               Dark
            </Button>
            <Button rounded variant="link">
               Link
            </Button>
         </>
      );
   })
   .add('size', () => {
      return (
         <>
            <Button size="sm">Small</Button>
            <Button size="md">Medium</Button>
            <Button size="lg">Large</Button>
         </>
      );
   })
   .add('with bgColor', () => {
      return (
         <>
            <Button bgColor="pink">Primary</Button>
            <Button bgColor="pink" outline>
               Primary
            </Button>
         </>
      );
   })
   .add('with theme provider primary', () => {
      return (
         <>
            <ThemeProvider
               theme={
                  {
                     primary: 'pink',
                     primaryTextInside: 'black',
                  } as ITheme
               }
            >
               <Button>Primary</Button>
            </ThemeProvider>
         </>
      );
   })
   .add('with theme provider button', () => {
      return (
         <>
            <ThemeProvider
               theme={
                  {
                     button: {
                        defaultColor: '#2eaced',
                        textColor: '#6a92a9',
                        rounded: true,
                        outline: true,
                     },
                  } as ITheme
               }
            >
               <Button>Primary</Button>
            </ThemeProvider>
         </>
      );
   });
