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

import InputNumber from '../../Components/InputNumber/src';
import inputNumberNote from '../../Components/InputNumber/README.md';

export default storiesOf('Components | InputNumber', module)
  .add('InputNumber', () => {
    const [value, setValue] = useState('');

    return (
      <InputNumber
        label="InputNumber"
        isDisabled={boolean('Disabled', false)}
        isRequired={boolean('Required', true)}
        onChange={setValue}
        elementId="InputText"
        onKeyUp={() => action('keyUp')}
        value={value}
        stepAmount="0.001"
        placeholder={text('Placeholder', 'Stop typing..')}
        showErrorLabel={boolean('Show error label', true)}
        errors={array('Errors', ['Errors'])}
      />
    );
  }, {
    notes: inputNumberNote,
  });