import React from "react"
import PropTypes from "prop-types"
import { View, Text, TouchableHighlight } from "react-native"
import { reactAutoBind } from "auto-bind2"

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

  constructor(props) {
    super(props)
    reactAutoBind(this)

    const { name, binder } = this.props

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

  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.getBindingState(nextProps.name))
    }
  }

  render() {
    const { name, title, 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>
      )
    }
  }
}