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

import Slider from '.'

const handleChange = action('value changed')

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

        #### Props:
        ---
        - title: string
        - name: string
        - value: number
        - min: number
        - max: number
        - onChange: func

      `,
    () => (
      <StoryWrapper>
        <Slider
          title="How much do you invest per trade"
          name="slider1"
          value={250}
          min={0}
          max={500}
          onChange={handleChange}
        />
      </StoryWrapper>
    )
  )
  .addWithInfo('with custom options', () => {
    const title = text('Title:', 'How much do you invest per trade')
    const name = text('Name:', 'slider1')
    const value = number('Value:', 250)
    const min = number('Min:', 0)
    const max = number('Max:', 500)
    return (
      <StoryWrapper>
        <Slider
          title={title}
          name={name}
          value={value}
          min={min}
          max={max}
          onChange={handleChange}
        />
      </StoryWrapper>
    )
  })
