import React from 'react'
import PropTypes from 'prop-types'
import { Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'

export default class BoundEmailIcon extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    binder: PropTypes.object,
  }

  constructor(props) {
    super(props)
    this.state = props.binder.getFieldState(props.name)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.binder !== this.props.binder) {
      this.setState(nextProps.binder.getFieldState(nextProps.name))
    }
  }

  render() {
    const { value } = this.state

    return (
      <div>
        <Text>&nbsp;</Text>
        <br />
        <Icon name={value ? 'confirmed' : 'warning'} size={sizeInfo.formBoundIcon} margin={sizeInfo.formBoundIconMargin} />
      </div>
    )
  }
}