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

import configureStore from '../../../storybook/configureStore';
import { updateRadio } from '../../../storybook/reducers/other';
import Radio from './component';

const { getState, dispatch } = configureStore();

// const RangeRF = reduxForm({
//   form: 'range',
// })(Range);

export const props = ({
  checked = undefined,
  id = undefined,
  value = undefined,
  name = undefined,
  label = undefined,
} = {}, groupId) => ({
  checked: boolean('checked', checked, groupId),
  id: text('id', id, groupId),
  value: text('value', value, groupId),
  name: text('name', name, groupId),
  label: text('label', label, groupId),
});

const onClick = () => { dispatch(updateRadio()); forceReRender() };

storiesOf('Web|form/Radio')
  .add('Default', () => (
    <Radio
      {...props({ checked: getState().other.formRadio.checked })}
      // {...props()}
      onClick={onClick}
    />
  ))
  // .add('Example with redux form', () => (
  //   <RadioRF
  //     {...props({ value: getState().other.formRadio.value, isRFFWrap: true })}
  //     onClick={onClick}
  //   />
  // ), { info: 'redux-form lib, reduxForm() parent' });
