import Checkbox from '../../checkbox';
import Form from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    fixedSpan: 8,
  },
  wrapperCol: {
    span: 14,
  },
};

class Demo extends React.Component {
  handleSubmit: (values: any, errors: any) => void;
  constructor(props) {
    super(props);

    this.handleSubmit = (values, errors) => {
      console.log('value & errors', values, errors);
    };
  }

  render() {
    return (
      <Form style={{ width: '60%' }} {...formItemLayout} colon>
        <FormItem
          label="Username:"
          required
          requiredMessage="Please input your username!"
        >
          <Input name="baseUser" />
        </FormItem>
        <FormItem
          label="Password:"
          required
          requiredMessage="Please input your password!"
        >
          <Input.Password name="basePass" placeholder="Please Enter Password" />
        </FormItem>
        <FormItem label=" " colon={false}>
          <Checkbox name="agreement" defaultChecked>
            Agree
          </Checkbox>
        </FormItem>
        <FormItem label=" " colon={false}>
          <Form.Submit
            type="primary"
            validate
            onClick={this.handleSubmit}
            style={{ marginRight: 8 }}
          >
            Submit
          </Form.Submit>
          <Form.Reset>Reset</Form.Reset>
        </FormItem>
      </Form>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('form-demo-1'));