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

import InputText from '../../Components/InputText/src';
import inputTextNote from '../../Components/InputText/README.md';

export default storiesOf('Components | InputText', module)
  .add('InputText', () => (
    <InputText
      name="InputText"
      onChange={(value) => action(value)}
      elementId="InputText"
      isDisabled={boolean('Disabled', false)}
      isRequired={boolean('Required', true)}
      label={text('Label', 'Label')}
      value={text('Text in field', 'Text in field')}
      maxLength={number('Max length', 20)}
      placeholder={text('Placeholder', 'Stop typing..')}
      showErrorLabel={boolean('Show error label', true)}
      errors={array('Errors', ['Errors', 'Errors'])}
      onErrorClick={() => alert('clicked on error label')}
    />
  ), {notes: inputTextNote});