import React from 'react';
import { storiesOf, forceReRender } from '@storybook/react';
import { text, number, boolean } from '@storybook/addon-knobs';
import { reduxForm, } from 'redux-form';

import configureStore from '../../../storybook/configureStore';
import { updateRange } from '../../../storybook/reducers/other';
import Range from './component';

const { getState, dispatch } = configureStore();

const TestWrap = ({ children }) => (<form>{children}</form>);

const RFWrap = reduxForm({
  form: 'rf-wrap',
})(TestWrap);

const props = ({
  isRFFWrap = undefined,
  label = undefined,
  value = undefined,
  fieldName = undefined,
  id = undefined,
  step = undefined,
} = {}) => ({
  isRFFWrap: boolean('isRFFWrap', isRFFWrap),
  label: text('label', label),
  value: number('value', value),
  id: text('id', id),
  fieldName: text('fieldName', fieldName),
  step: number('step', step),
});

const onChange = ({ target: { value }}) => { dispatch(updateRange(value)); forceReRender() };

storiesOf('Web|form/Range')
  .add('Example', () => (
    <Range
      {...props({ value: getState().other.formRange.value })}
      onChange={onChange}
    />
  ))
  .add('Example with redux form', () => (
    <RFWrap>
      <Range
        {...props({ value: getState().other.formRange.value, isRFFWrap: true })}
        onChange={onChange}
      />
    </RFWrap>
  ), { info: 'redux-form lib, reduxForm() parent' });
