import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {
  text,
  number,
  boolean,
  array,
} from '@storybook/addon-knobs';

import Textarea from '../../Components/Textarea/src';
import textareaNote from '../../Components/Textarea/README.md';

export default storiesOf('Components | Textarea', module)
  .add('default', () => (
    <Textarea
      onBlur={action('on changed')}
      value={text('value', 'Lorem ipsum')}
      name="textarea"
      elementId="textarea"
      maxLength={number('maxLength', 500)}
      isRequired={boolean('isRequired', true)}
      onChange={action('on changed')}
      rows={number('row', 10)}
      errors={array('Errors', ['Errors'])}
      label={text('Label', 'Textarea')}
      isDisabled={boolean('isDisabled', false)}
      isReadonly={boolean('isReadonly', false)}
      placeholder={text('placeholder', 'Start typing')}
    />
  ), {
    notes: textareaNote,
  });