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

export class BoundInput extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    message: PropTypes.string,
    label: PropTypes.string,
    binder: PropTypes.object.isRequired,
    password: PropTypes.bool,
    placeholder: PropTypes.string,
    lines: PropTypes.number,
  }

  static defaultProps = {
    lines: 1,
  }

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

    const { name, binder } = this.props

    this.state = binder.getBindingState(name)
  }

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

  handleChangeText(newText) {
    const { binder, name } = this.props

    if (binder) {
      this.setState(binder.updateBindingValue(name, newText))
    }
  }

  render() {
    const { label, password, name, placeholder, message, lines } = this.props
    const { visible, disabled, readOnly, value, valid } = this.state

    if (!visible) {
      return null
    }

    return (
      <View style={{ width: "100%" }}>
        <Text
          style={{
            color: "black",
            fontSize: 14,
            marginBottom: 5,
          }}>
          {label}
        </Text>
        <TextInput
          style={{
            width: "100%",
            paddingLeft: 5,
            paddingRight: 5,
            borderColor: "gray",
            borderWidth: 1,
            fontSize: 16,
            paddingTop: 7,
            paddingBottom: Platform.OS === "ios" ? 7 : 0,
            textAlignVertical: "top",
            marginBottom: 5,
          }}
          multiline={lines > 1}
          numberOfLines={lines}
          editable={!disabled && !readOnly}
          autoCapitalize="none"
          underlineColorAndroid="white"
          value={value}
          secureTextEntry={password}
          onChangeText={this.handleChangeText}
          placeholder={placeholder}
        />
        <Text
          style={{
            fontSize: 12,
            color: "red",
          }}>
          {valid ? " " : message}
        </Text>
      </View>
    )
  }
}