import './demo6.css';
import Balloon from '../../balloon';
import Button from '../../button';
import Form from '..';
import Grid from '../../grid';
import Icon from '../../icon';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
const FormItem = Form.Item;
const { Row, Col } = Grid;

const style = {
  padding: '20px',
  background: '#F7F8FA',
  margin: '20px',
};
const formItemLayout = {
  labelCol: { fixedSpan: 6 },
};
interface PageStates {
  labelAlign: string;
}

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

    this.state = {
      labelAlign: 'top',
    };

    this.handleChange = v => {
      this.setState({
        labelAlign: v ? 'left' : 'top',
      });
    };
  }

  render() {
    const labelAlign = this.state.labelAlign;

    return (
      <div>
        <Form inline>
          <Form.Item label="label Position">
            <Switch
              checkedChildren="left"
              unCheckedChildren="top"
              checked={this.state.labelAlign === 'left'}
              onChange={this.handleChange}
            />
          </Form.Item>
        </Form>

        <Form style={style}>
          <Row gutter="24">
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label={'name'}
                required
              >
                <Input placeholder="Enter a search name" />
                <Balloon
                  type="primary"
                  trigger={<Icon type="prompt" size="small" />}
                  closable={false}
                >
                  blablablablablablablabla
                </Balloon>
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Long search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Long search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Long search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col style={{ textAlign: 'right' }}>
              <Button type="primary" style={{ marginRight: '5px' }}>
                Search
              </Button>
              <Button>Clear All</Button>
            </Col>
          </Row>
        </Form>

        <Form style={style}>
          <Row gutter="24">
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label={'name'}
                required
              >
                <Input placeholder="Enter a search name" />
                <Balloon
                  type="primary"
                  trigger={<Icon type="prompt" size="small" />}
                  closable={false}
                >
                  blablablablablablablabla
                </Balloon>
              </FormItem>
            </Col>
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Long search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
            <Col>
              <FormItem
                {...formItemLayout}
                labelAlign={labelAlign as 'top' | 'left' | 'inset'}
                label="Search name"
              >
                <Input placeholder="Enter a search name" />
              </FormItem>
            </Col>
            <Col>
            </Col>
          </Row>
          <Row>
            <Col style={{ textAlign: 'right' }}>
              <Button type="primary" style={{ marginRight: '5px' }}>
                Search
              </Button>
              <Button>Clear All</Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('form-demo-6'));