import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

import InputNumber from './index';
import InputNumberOptions from './InputNumber.knobs.options';
import InputNumberDocs from './InputNumber.md';

storiesOf('forms|atoms', module).addDecorator(withKnobs({
  escapeHTML: false
})).add('InputNumber', function () {
  var inputTextOptionsWithKnobs = {};
  Object.getOwnPropertyNames(InputNumberOptions).forEach(function (key) {
    inputTextOptionsWithKnobs[key] = InputNumberOptions[key]();
  });
  var storyProps = {
    style: inputTextOptionsWithKnobs.inline ? { width: '400px' } : { width: '200px' }
  };
  if (inputTextOptionsWithKnobs.width > 0) {
    storyProps.style = { width: inputTextOptionsWithKnobs.width + 'px' };
  }
  return React.createElement(
    'div',
    storyProps,
    React.createElement(InputNumber, inputTextOptionsWithKnobs)
  );
}, {
  info: InputNumberDocs
});