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

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

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

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

const props = ({
  isHidden,
  isDisabled,
  placeholder = 'placeholder',
  id = 'something',
} = {}) => ({
  isHidden: boolean('isHidden', isHidden),
  isDisabled: boolean('isDisabled', isDisabled),
  placeholder: text('placeholder', placeholder),
  id: text('id', id),
});

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