import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, select, boolean } from '@storybook/addon-knobs'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import Input from '.'

const InputSize = {
  normal: 'normal',
  small: 'small'
}

const InputColor = {
  blue: 'blue',
  green: 'green',
  violet: 'violet'
}

storiesOf('Input', module)
  .addDecorator(withKnobs)
  .addWithInfo(
    'basic usage',
    `
          This is the basic usage of the Input.

          #### Props:
          ---
          - role: string,
          - className ?: string,
          - size?: string,
          - color?: string,
          - hasMessage?: boolean,
          - isError?: boolean,
          - message?: string,
          - placeholder?: string

        `,
    () => (
      <StoryWrapper>
        <Input />
      </StoryWrapper>
    )
  )
  .addWithInfo('with custom options', () => {
    const size = select('Input size:', InputSize, InputSize['normal'])
    const color = select('Input color:', InputColor, InputColor['blue'])
    const hasMessage = boolean('Has message:', false)
    const isError = boolean('Is error:', false)

    return (
      <StoryWrapper>
        <Input
          size={size}
          color={color}
          hasMessage={hasMessage}
          isError={isError}
        />
      </StoryWrapper>
    )
  })
