import './demo3.css';
import DatePicker from '../../date-picker';
import Form from '..';
import Input from '../../input';
import NumberPicker from '../../number-picker';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
import Switch from '../../switch';
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
interface PageState {
  size: string;
}

class Demo extends React.Component<{}, PageState> {
  handleChange: (v: any) => void;
  constructor(props) {
    super(props);

    this.state = {
      size: 'medium',
    };

    this.handleChange = v => {
      this.setState({
        size: v,
      });
    };
  }

  render() {
    return (
      <div>
        <Form
          {...formItemLayout}
          size={this.state.size as 'medium' | 'small' | 'large'}
          style={{ maxWidth: '500px' }}
        >
          <FormItem label="Size:">
            <Radio.Group
              shape="button"
              value={this.state.size}
              onChange={this.handleChange}
            >
              <Radio value="small">small</Radio>
              <Radio value="medium">medium</Radio>
              <Radio value="large">large</Radio>
            </Radio.Group>
          </FormItem>
          <FormItem label="Input:">
            <Input placeholder="Please enter your user name" id="userName" />
          </FormItem>
          <FormItem label="Select:">
            <Select>
              <Select.Option value="test">test</Select.Option>
            </Select>
          </FormItem>
          <FormItem label="NumberPicker:">
            <NumberPicker />
          </FormItem>
          <FormItem label="DatePicker:">
            <DatePicker />
          </FormItem>
          <FormItem label="Switch:">
            <Switch />
          </FormItem>
        </Form>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('form-demo-3'));