import React from 'react'
import { storiesOf, action } from '@storybook/react'
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs'
import backgrounds from '@storybook/addon-backgrounds'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import StorybookTheme from 'storybookTheme'

import DefaultButton from '.'

const backgroundColor = {
  'dodger-blue': 'dodger-blue',
  'bright-turquoise': 'bright-turquoise',
  'clear-light': 'clear-light',
  'clear-dark': 'clear-dark',
  'transparent-green': 'transparent-green',
  'dark-blue3': 'dark-blue3'
}

const btnSize = {
  normal: 'normal',
  bigger: 'bigger'
}

storiesOf('Default Button', module)
  .addDecorator(backgrounds(StorybookTheme.storiesBackgrounds))
  .addDecorator(withKnobs)
  .addWithInfo(
    'basic usage',
    `
        This is the basic usage of the Default Button.

        #### Props:
        ---
        - role: string,
        - className ?: string,
        - disabled ?: boolean,
        - onClick ?: () => {},
        - backgroundColor?: string,
        - size?: string

      `,
    () => (
      <StoryWrapper>
        <DefaultButton onClick={action('onClick')}>
          Explore tokens
        </DefaultButton>
      </StoryWrapper>
    )
  )
  .addWithInfo('with custom options', () => {
    const backColor = select(
      'Background:',
      backgroundColor,
      backgroundColor['dodger-blue']
    )
    const disabled = boolean('Disabled', false)
    const label = text('Label:', 'Explore tokens')
    const size = select('Size:', btnSize, btnSize.normal)

    return (
      <StoryWrapper>
        <DefaultButton
          disabled={disabled}
          size={size}
          backgroundColor={backColor}
        >
          {label}
        </DefaultButton>
      </StoryWrapper>
    )
  })
  .addWithInfo('with a loading spinner', () => {
    return (
      <StoryWrapper>
        <DefaultButton isLoading>Loading…</DefaultButton>
      </StoryWrapper>
    )
  })
