import React from 'react';
import ReactDom from 'react-dom';

import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import DemoValidator from './demoValidator';
import DemoApi from './demoApi';

import { Form, FormRow, Label } from '../index';
import Radio from '../../radio/index';

const { Input, RadioGroup, CheckGroup, Datepicker } = Form;

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const options = [{
      label: '班级通收费',
      id: 0
    }, {
      label: '班级1',
      id: 1
    }, {
      label: '班级2',
      id: 2
    }];

    return (
      <Demo doc={<Doc />} name="Form">
        <DemoPanel title="默认horizontal & inline={false}">
          <Form>
            <FormRow>
              <Label required help="//ke.qq.com">课程名称</Label>
              <Input />
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">是否收费</Label>
              <RadioGroup>
                <Radio value={0}>免费</Radio>
                <Radio value={1}>付费</Radio>
              </RadioGroup>
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">上架IOS</Label>
              <RadioGroup inline={false}>
                <Radio value={0}>是</Radio>
                <Radio value={1}>否</Radio>
              </RadioGroup>
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">收费</Label>
              <CheckGroup options={options} />
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">垂直的收费</Label>
              <CheckGroup options={options} inline={false} />
            </FormRow>

            <FormRow>
              <Label required>报名截止时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
        </DemoPanel>

        <DemoPanel title="horizontal={false}">
          <Form horizontal={false}>
            <FormRow>
              <Label required help="//ke.qq.com">课程名称</Label>
              <Input />
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">是否收费</Label>
              <RadioGroup>
                <Radio value={0}>免费</Radio>
                <Radio value={1}>付费</Radio>
              </RadioGroup>
            </FormRow>

            <FormRow>
              <Label required help="//ke.qq.com">收费</Label>
              <CheckGroup options={options} />
            </FormRow>

            <FormRow>
              <Label required>报名截止时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
        </DemoPanel>

        <DemoPanel title="inline={true}">
          <Form inline>
            <FormRow>
              <Label required>课程名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>

            <FormRow>
              <Label required>老师名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>

            <FormRow>
              <Label required>开始时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
        </DemoPanel>

        <DemoPanel title="inline & horizontal={false}">
          <Form inline horizontal={false}>
            <FormRow>
              <Label required>课程名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>

            <FormRow>
              <Label required>老师名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>

            <FormRow>
              <Label required>开始时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
        </DemoPanel>

        <DemoPanel title="跟Validator结合">
          <DemoValidator />
        </DemoPanel>

        <DemoPanel title="setValues & getValues API">
          <DemoApi />
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

if (demo) {
  ReactDom.render(<App />, demo);
}