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>
        {/* <NumberPicker defaultValue={0} disabled /> */}
          <NumberPicker shape='primary' onChange={onChange} />
          <br />
          <NumberPicker shape='primary' type="inline" size='large' onChange={onChange} />
          <br />
          <NumberPicker size='medium' onChange={onChange} />
          <br />
          <NumberPicker size='small' onChange={onChange} />

          <br />
          <br />
          <NumberPicker defaultValue={0} type="inline" onChange={onChange} />
        </div>
        <div>
          <NumberPicker defaultValue={0} size="small" />
          <NumberPicker defaultValue={0} />
          <NumberPicker defaultValue={0} size="large" />
          <br />
          <br />
          <NumberPicker defaultValue={0} size="small" type="inline" disabled />
          <NumberPicker defaultValue={0} type="inline"disabled />
          <NumberPicker defaultValue={0} size="large" type="inline" disabled />
        </div>
        <p>灰色</p>
        <div>
          <NumberPicker onChange={onChange} theme="dark"/>
          <br />
          <br />
          <NumberPicker defaultValue={0} type="inline" onChange={onChange} theme="dark"/>
        </div>
        <div>
          <NumberPicker defaultValue={0} size="small" theme="dark"/>
          <NumberPicker defaultValue={0} theme="dark"/>
          <NumberPicker defaultValue={0} size="large" theme="dark"/>
          <br />
          <br />
          <NumberPicker defaultValue={0} size="small" type="inline"/>
          <NumberPicker defaultValue={0} type="inline" theme="dark"/>
          <NumberPicker defaultValue={0} size="large" type="inline" theme="dark"/>
        </div>
        <br />
        <br/>
        <NumberPicker defaultValue={0} size="large" type="inline"shape='primary' disabled/>
        <NumberPicker defaultValue={0} size="large" type="inline"  shape='primary' theme="dark" disabled/>
        <NumberPicker defaultValue={0} size="large" shape='primary' />
        <NumberPicker defaultValue={0} size="large" theme="dark" />

      </div>
    </div>
  );
});