import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './index'
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  color,
  button,
  select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import styled from 'styled-components';
import { selectV2 } from '@storybook/addon-knobs';

storiesOf('Button', module)
  .add('Simple Button',
     withInfo('generic button component using material ui RaisedButton')(
          () => (
            <Button
              labelColor={color('Label Color','#ffffff')}
              label={text('label','Push Me')}
              backgroundColor={color('Background Color','#dd712f')}
              buttonType={select('buttonType', {
                'label' : 'label',
                'icon' : 'icon',
                'label-icon' : 'label-icon'
              }, 'label' , 'groupId')}
              title={text('title','Title')}
              onClick={()=>{console.log('ouch!Gently')}}
            />
          )
     ))
  .add('Themed Label Button',
     withInfo('two themes have been supplied')(
          () => (
            <Button
              label={text('label','Push Me')}
              buttonType='label'
              themeType={select('themeType', {
                'prime-panel-primary' : 'prime-panel-primary',
                'prime-panel-secondary' : 'prime-panel-secondary'
              }, 'prime-panel-primary' , 'groupId')}
              onClick={()=>{console.log('ouch!Gently')}}
            />
          )
     ))
  .add('Disabled Label Button',
     withInfo('disabled - no onClick callback is fired, check action logger')(
          () => (
            <Button
              label={text('label','Push Me')}
              buttonType='label'
              themeType='prime-panel-primary'
              disabled
              onClick={()=>{console.log('ouch!Gently')}}
            />
          )
     ))
  .add('Label Icon Button',
     withInfo('Button with label and icon')(
          () => (
            <Button
              materialIcon='close'
              label={text('label','Push Me')}
              buttonType='label-icon'
              themeType='prime-panel-primary'
              disabled
              labelPosition={select('labelPosition:', {
                'after' : 'after',
                'before' : 'before'
              }, 'after' , 'groupId')}
              onClick={()=>{console.log('ouch!Gently')}}
            />
          )
     ))
  .add('Icon Button',
     withInfo('Button with an icon')(
          () => (
            <Button
              materialIcon='close'
              buttonType='icon'
              themeType='prime-panel-primary'
              onClick={()=>{console.log('ouch!Gently')}}
            />
          )
     ))