import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Radio } from "../src/index";
const Shape = {
  NORMAL: 'normal',
  BUTTON: 'button'
}

const ItemDirection = {
  HORIZON: 'hoz',
  VERTICAL: 'ver'
}

storiesOf("Radio", module).add("Radio", () => {
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
        <div>
          <h4>Without Label</h4>
          <Radio defaultChecked />
          &nbsp;
          <Radio checked />
          &nbsp;
          <Radio disabled />
          &nbsp;
          <Radio checked disabled />
          &nbsp;
          <Radio />
          <br />
          <h4>With Label</h4>
          <Radio  size='large'id="apple">Apple</Radio>&nbsp;
          <Radio size='medium'id="banana" />
          <label htmlFor="banana" className="next-radio-label">
            Banana
          </label>
          &nbsp;
          <Radio size='small' id="apple2" label="Apple"/>
        </div>
        <p>基本 group</p>
        <Radio.Group
          shape={"button"}
          size="small"
          itemDirection={'hoz'}
          defaultValue="vue"
          // theme='dark'
        >
          <Radio value="react">React</Radio>
          <Radio value="vue">Vue</Radio>
          <Radio value="angular">Angular</Radio>
          <Radio value="vv">vv</Radio>
          <Radio value="xx">xx</Radio>


        </Radio.Group>
        <br/>
        <br/>
        <Radio.Group
          shape={"button"}
          itemDirection={'hoz'}
          defaultValue="vue"
          // theme='dark'
        >
          <Radio value="react">React</Radio>
          <Radio value="vue">Vue</Radio>
          <Radio value="angular">Angular</Radio>
          <Radio value="vv">vv</Radio>
          <Radio value="xx">xx</Radio>


        </Radio.Group>
        <br/>
        <br/>
        <Radio.Group
          shape={"button"}
          size="large"
          itemDirection={'hoz'}
          defaultValue="vue"
          // theme='dark'
        >
          <Radio value="react">React</Radio>
          <Radio value="vue">Vue</Radio>
          <Radio value="angular">Angular</Radio>
          <Radio value="vv">vv</Radio>
          <Radio value="xx">xx</Radio>


        </Radio.Group>
        <p>container group</p>
        <Radio.Group
          shape={"button"}
          itemDirection={'hoz'}
          type="container"
          defaultValue="react"
        >
          <Radio value="react">React</Radio>
          <Radio value="vue">Vue</Radio>
          <Radio value="angular">Angular</Radio>
        </Radio.Group>
        <br/>
        <br/>
        <Radio.Group
          shape={"button"}
          itemDirection={'hoz'}
          type="container"
          defaultValue="all"
        >
          <Radio value="all">全部</Radio>
          <Radio value="time">按时间查看</Radio>
        </Radio.Group>
        <Radio.Group
            shape="normal"
          >
            <Radio value='normal'>Normal</Radio>
            <Radio value='Button'>Button</Radio>
          </Radio.Group>
      </div>
    </div>
  );
});