import React from 'react'
import PropTypes from 'prop-types'
import { Checkbox } from 'ui'

// This is an example of a validated component with a value that can change itself, that cannot ever be invalid.

export class ValidatedCheckbox extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    validator: PropTypes.object.isRequired,
  }

  constructor(props) {
    super(props)

    this.state = props.validator.getField(props.name)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e, data) {
    const { validator, name } = this.props
    const state = validator.getField(name)

    if (!state.readOnly && !state.disabled) {
      this.setState(validator.updateValue(name, data.checked))
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.validator !== this.props.validator) {
      this.setState(nextProps.validator.getField(nextProps.name))
    }
  }

  render() {
    return (
      <Checkbox value={!!this.state.value} name={this.props.name} label={this.props.label} />
    )
  }
}