import * as React from "react";
import { storiesOf } from "@storybook/react";
import { NumberPicker } from "../src/index";

function onChange(value, e) {
  console.log(value, e.type, e.triggerType)
}

storiesOf("NumberPicker", module).add("NumberPicker", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
      <div>
      <div style={{ paddingLeft: '10px' }}>
        <NumberPicker onChange={onChange} />
        <NumberPicker onChange={onChange} size='medium' />
        <NumberPicker onChange={onChange} size='small'/>

        <br />
        <br />
        <NumberPicker defaultValue={0} type="inline" onChange={onChange} />
        <br />
        <br />
        <NumberPicker onChange={onChange} shape="primary" />
        <br />
        <br />
        <NumberPicker
          defaultValue={0}
          type="inline"
          onChange={onChange}
          shape="primary"
        />
      </div>
      <br />
      <div style={{ background: '#F3F3F3', padding: '24px 10px' }}>
        
        <NumberPicker onChange={onChange} theme="dark" />
        <br />
        <br />
        <NumberPicker
          defaultValue={0}
          type="inline"
          theme="dark"
          onChange={onChange}
        />
      </div>
    </div>




      <div style={{ paddingLeft: '10px' }}>
        <NumberPicker defaultValue={0} state='error'size='small' />
        <br />
        <br />
        <NumberPicker defaultValue={0} type="inline" state='error' />
        <br />
        <br />
        <NumberPicker defaultValue={0} shape="primary" state='error' />
        <br />
        <br />
        <NumberPicker
          defaultValue={0}
          type="inline"
          oshape="primary"
          state='error'
        />
        <br />
        <br />
      </div>
      <div style={{ background: '#F3F3F3', paddingLeft: '10px' }}>
        <br />
        <NumberPicker defaultValue={0} theme="dark" state='error' />
        <br />
        <br />
        <NumberPicker defaultValue={0} type="inline" theme="dark" state='error' />
      </div>
      <div style={{ paddingLeft: '10px' }}>
        <NumberPicker defaultValue={0} disabled />
        <br />
        <br />
        <NumberPicker defaultValue={0} type="inline" disabled />
        <br />
        <br />
        <NumberPicker defaultValue={0} shape="primary" disabled />
        <br />
        <br />
        <NumberPicker
          defaultValue={0}
          type="inline"
          oshape="primary"
          disabled
        />
        <br />
        <br />
      </div>
      <div style={{ background: '#F3F3F3', paddingLeft: '10px' }}>
        <br />
        <NumberPicker defaultValue={0} theme="dark" disabled />
        <br />
        <br />
        <NumberPicker defaultValue={0} type="inline" theme="dark" disabled />
      </div>
      </div>
    </div>
  );
});