/* eslint no-console:0 */
import Checkbox from '../index'
import '../assets/index.less'

function onChange (e) {
  console.log('Checkbox checked:', (e.target.checked))
}

export default {
  data () {
    return {
      disabled: false,
    }
  },
  methods: {
    toggle () {
      this.disabled = !this.disabled
    },
  },
  render () {
    return (
      <div style={{ margin: '20px' }}>
        <div>
          <p>
            <label>
              <Checkbox
                checked
                onChange={onChange}
                disabled={this.disabled}
              />
              &nbsp; controlled checked rc-checkbox
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                checked
                type='checkbox'
                onChange={onChange}
                disabled={this.disabled}
              />
              &nbsp; controlled checked native
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox
                defaultChecked
                onChange={onChange}
                disabled={this.disabled}
              />
              &nbsp; defaultChecked rc-checkbox
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox
                name='my-checkbox'
                defaultChecked
                onChange={onChange}
                disabled={this.disabled}
                id='test'
              />
              &nbsp; defaultChecked rc-checkbox with name
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <button onClick={this.toggle}>toggle disabled</button>
      </div>
    )
  },
}