import React from 'react';

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

import Button from '../../button/index';

const { Input, Radio, RadioGroup, Checkbox, CheckGroup, Datepicker, Dropdown } = Form;

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

    this.state = {
      values: ''
    };

    this.getFormValues = this.getFormValues.bind(this);
    this.setFormValues = this.setFormValues.bind(this);
    this.editingValues = this.editingValues.bind(this);
  }

  getFormValues() {
    const values = this.refs.myForm.getValues();

    this.setState({ values: JSON.stringify(values) });
  }

  setFormValues() {
    const values = JSON.parse(this.state.values);

    this.refs.myForm.setValues(values);
  }

  editingValues(values) {
    this.setState({ values });
  }

  render() {
    const checkOpts = [{
      label: '默认选中且disabled',
      id: 1,
      disabled: true
    }, {
      label: '默认没选中',
      id: 2
    }, {
      label: (<span>默认选中，带有自定义标签（元素）的label</span>),
      id: 3
    }];

    return (
      <Form ref="myForm">
        <FormRow>
          <p>Form.Input</p>
          <Input name="input" style={{ width: 165 }} />
        </FormRow>

        <FormRow>
          <p>Form.Datepicker</p>
          <Datepicker name="datepicker" />
        </FormRow>

        <FormRow>
          <p>Form.Dropdown</p>
          <Dropdown
            name="dropdown"
            options={[
              { value: 'A' },
              { value: 'B' },
              { value: 'C' },
            ]}
            style={{ width: '200px' }}
          />
        </FormRow>

        <FormRow>
          <p>Form.Checkbox</p>
          <Checkbox name="checkbox" checked />
        </FormRow>

        <FormRow>
          <p>Form.CheckGroup</p>
          <CheckGroup
            name="checkgroup"
            options={checkOpts}
            value={[1, 3]}
          />
        </FormRow>

        <FormRow>
          <p>Form.RadioGroup</p>
          <RadioGroup name="radiogroup">
            <Radio value={0}>免费</Radio>
            <Radio value={1}>收费</Radio>
          </RadioGroup>
        </FormRow>

        <Button
          type="button"
          onClick={this.getFormValues}
        >
          getValues
        </Button>
        <Button
          type="button"
          style={{ marginLeft: 40 }}
          onClick={this.setFormValues}
        >
          setValues
        </Button>

        <Input
          placeholder="按钮点击结果展示"
          value={this.state.values}
          onChange={this.editingValues}
          style={{
            display: 'block',
            marginTop: 20,
            width: 400
          }}
        />
      </Form>
    );
  }
}