import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Form,
  Input,
  Select,
  Radio,
  Checkbox,
  DatePicker,
  Switch,
  Upload,
  Grid,
  Field } from "../src/index";
  const RadioGroup = Radio.Group
  const { Row, Col } = Grid
  const FormItem = Form.Item
  const Option = Select.Option
  const formItemLayout = {
    labelCol: {
      span: 7
    },
    wrapperCol: {
      span: 16
    }
  }
  
storiesOf("Form", module).add("Form", () => {
  
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
      <Form
          {...formItemLayout}
          style={{ maxWidth: '800px' }}
          labelTextAlign="left"
        >
          <FormItem required label="username:">
            <Input
              placeholder="Please enter your username"
              id="a11yUsername"
              name="a11yUsername"
              aria-required="true"
            />
          </FormItem>
          <FormItem required label="Password:">
            <Input
              htmlType="password"
              placeholder="Please enter your password"
              id="a11yPassword"
              name="a11yPassword"
              aria-required="true"
            />
          </FormItem>
          <FormItem
            id="myDateInput-1"
            required
            label="Accessible Date 1 (YYYY/MM/DD):"
            requiredMessage="Please select your date"
          >
            <DatePicker
              name="a11yDate"
              format="YYYY/MM/DD"
              inputProps={{ 'aria-required': 'true', id: 'myDateInput-1' }}
            />
          </FormItem>
          <FormItem
            required
            label="Accessible Date 2 (YYYY/MM/DD):"
            requiredMessage="Please select your date"
          >
            <DatePicker
              name="a11yOtherDate"
              format="YYYY/MM/DD"
              dateInputAriaLabel="Date input format YYYY/MM/DD"
              inputProps={{
                'aria-required': 'true',
                'aria-label': 'Accessible Date 2'
              }}
            />
          </FormItem>
          <FormItem label="Switch:">
            <Switch
              name="a11ySwitch"
              aria-label="Accessible Switch"
              defaultChecked
            />
          </FormItem>
          <FormItem
            required
            label="gender:"
            requiredMessage="Please select your gender"
          >
            <RadioGroup name="a11ySex">
              <Radio value="male" aria-required="true">
                Male
              </Radio>
              <Radio value="female" aria-required="true">
                Female
              </Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="Language:">
            <Checkbox.Group
              name="a11yLangs"
              aria-label="Please select a programming language"
            >
              <Checkbox value="python">python</Checkbox>
              <Checkbox value="java">java</Checkbox>
              <Checkbox value="angular">angular</Checkbox>
              <Checkbox value="c">c</Checkbox>
              <Checkbox value="other">other</Checkbox>
            </Checkbox.Group>
          </FormItem>
          <FormItem label="upload:">
            <Upload.Card
              listType="card"
              action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
              accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
              defaultValue={[]}
              limit={2}
              name="a11yUpload"
            />
          </FormItem>
          <FormItem label="Note:">
            <Input.TextArea placeholder="description" name="a11yRemark" />
          </FormItem>
          <FormItem wrapperCol={{ offset: 7 }}>
            <Form.Submit
              validate
              type="primary"
              onClick={this.submitHandle}
              style={{ marginRight: 7 }}
            >
              Submit
            </Form.Submit>
            <Form.Reset >Reset</Form.Reset>
          </FormItem>
        </Form>
          
      </div>
    </div>
  );
});