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

import { TextField } from '../index';

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

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

const props = ({
  isHidden = undefined,
  isDisabled = undefined,
  isUnstyledPlaceholder = undefined,
  isInCombo = undefined,
  type = undefined,
  placeholder = 'placeholder',
  afterText = undefined,
  id = 'something',
} = {}) => ({
  isHidden: boolean('isHidden', isHidden),
  isDisabled: boolean('isDisabled', isDisabled),
  isUnstyledPlaceholder: boolean('isUnstyledPlaceholder', isUnstyledPlaceholder),
  isInCombo: boolean('isInCombo', isInCombo),
  type: text('type', type),
  placeholder: text('placeholder', placeholder),
  afterText: text('afterText', afterText),
  id: text('id', id),
});

storiesOf('Web|form/TextField')
  .add('Default', () => (
    <RFWrap>
      <Field
        component={TextField}
        {...props()}
      />
    </RFWrap>
  ))
  .add('Error', () => (
    <RFWrap>
      <Field
        component={TextField}
        {...props()}
        meta={{ touched: true, error: 'error message' }}
      />
    </RFWrap>
  ), { info: 'redux-form lib, reduxForm() parent' });
