import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, TouchableHighlight } from 'react-native'
import autobind from 'autobind-decorator'

export class BoundButton extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    title: PropTypes.string,
    binder: PropTypes.object.isRequired,
    submit: PropTypes.string,
    onPress: PropTypes.func,
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
  }

  constructor(props) {
    super(props)

    let { name, binder } = this.props

    binder.addListener(name, this.updateValue)
    this.state = binder.getFieldState(name)
  }

  @autobind
  updateValue(e) {
    this.setState(e.state)
  }

  componentWillUnmount() {
    this.props.binder.removeListener(this.props.name, this.updateValue)
  }

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

  render() {
    const { name, title, submit, width, onPress } = this.props
    const { visible, disabled } = this.state

    if (!visible) {
      return null
    }

    if (disabled) {
      return (
        <View style={{ flexDirection: 'column', justifyContent: 'center', paddingHorizontal: 10, height: 40, width , backgroundColor: '#E0E0E0' }}>
          <Text style={{ alignSelf: 'center', color: '#AAAAAA' }}>{title}</Text>
        </View>
      )
    } else {
      return (
        <TouchableHighlight
          onPress={onPress}
          style={{ justifyContent: 'center', paddingHorizontal: 10, height: 40, width, backgroundColor: '#3BB0FD' }}
          underlayColor='#1A72AC'>
          <Text style={{ alignSelf: 'center', color: 'black' }}>{title}</Text>
        </TouchableHighlight>
      )
    }
  }
}