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 { updateRadioGroup } from '../../../../storybook/reducers/other';
import { props as propsRadio } from '../stories';
import Radio from '../component';
import RadioGroup from './component';

const { getState, dispatch } = configureStore();

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

const props = ({
  isHidden = undefined,
  title = undefined,
} = {}) => ({
  isHidden: boolean('isHidden', isHidden, 'group'),
  title: text('title', title, 'group'),
});

const onClick = (sex) => { dispatch(updateRadioGroup(sex)); forceReRender() };

storiesOf('Web|form/Radio')
  .add('Group', () => (
    <RadioGroup {...props({ title: 'sex' })}>
      <Radio
        {...propsRadio({
          checked: getState().other.formRadioGroup.male,
          name: 'sex',
          id: 'male',
          value: 'male',
          label: 'male',
        }, 'male')}
        onClick={() => onClick('male')}
      />
      <Radio
        {...propsRadio({
          checked: getState().other.formRadioGroup.female,
          name: 'sex',
          id: 'female',
          value: 'female',
          label: 'female',
        }, 'female')}
        onClick={() => onClick('female')}
      />
    </RadioGroup>
  ))
  // .add('Example with redux form', () => (
  //   <RadioGroupRF
  //     {...props({ value: getState().other.formRadioGroup.value, isRFFWrap: true })}
  //     onClick={onClick}
  //   />
  // ), { info: 'redux-form lib, reduxForm() parent' });
