import React from "react"
import PropTypes from "prop-types"
import { Header } from "."
import { reactAutoBind } from "auto-bind2"

const headerButtonShape = {
  icon: PropTypes.string.isRequired,
  onPress: PropTypes.func,
}

export class BoundHeader extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    title: PropTypes.string,
    leftButton: PropTypes.shape(headerButtonShape).isRequired,
    rightButton: PropTypes.shape(headerButtonShape),
    binder: PropTypes.object.isRequired,
  }

  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 { title, leftButton } = this.props
    let { rightButton } = this.props
    const { visible, disabled } = this.state

    if (!visible) {
      rightButton = null
    }

    return (
      <Header
        title={title}
        disabled={disabled}
        leftButton={leftButton}
        rightButton={rightButton}
      />
    )
  }
}