import React, { Component } from 'react'
import PropTypes from 'prop-types'

import View from './InputView'

export default class TextInput extends Component {
  static propTypes = {
    defaultValue: PropTypes.string,
    formId: PropTypes.string,
    hidden: PropTypes.bool,
    id: PropTypes.string,
    label: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool,
    set: PropTypes.func,
    store: PropTypes.object,
  }

  state = {
    error: null,
    valid: null,
  }

  componentDidMount() {
    this.setValue(this.props.defaultValue || '')
  }

  componentWillReceiveProps(nextProps) {
    const { store, formId } = nextProps
    if (store[formId] && store[formId].error && store[formId].error.fields) {
      this.parseErrors(store[formId].error.fields)
    } else if (this.state.error) {
      this.setState({ error: null })
    }
  }

  parseErrors(errors) {
    const fieldError = errors.find(error => error.ID === this.props.id)
    if (fieldError) this.setState({ error: fieldError.ErrorText })
  }

  get isInput() { return true }

  getValue() {
    const { formId, store, id } = this.props
    if (store[formId] && store[formId].fields[id]) {
      return store[formId].fields[id]
    } else {
      return ''
    }
  }

  onChange = (event) => {
    const value = event.target.value
    this.setValue(value)
  }

  setValue(value) {
    const { formId, id } = this.props
    this.props.set(formId, id, value)
  }

  get inputProps() {
    return {
      hidden: this.props.hidden,
      onChange: this.onChange,
      placeholder: this.props.placeholder,
      required: this.props.required,
      type: 'text',
      value: this.getValue(),
    }
  }

  get label() {
    if (this.state.error) return `${this.props.label} (${this.state.error})`
    else return this.props.label
  }

  render() {
    const { error } = this.state
    return (
      <View error={error} inputProps={this.inputProps}>
        {this.label}
      </View>
    )
  }
}

@@ -1078,385 +1078,386 @@
 %0A%0A  
-getValue() %7B%0A    const %7B formId, store, id %7D = this.props%0A    if (store%5BformId%5D && store%5BformId%5D.fields%5Bid%5D) %7B%0A      return store%5BformId%5D.fields%5Bid%5D%0A    %7D else %7B%0A      return ''%0A    %7D%0A  %7D%0A%0A  onChange = (event) =%3E %7B%0A    const value = event.target.value%0A    this.setValue(value)%0A  %7D%0A%0A  setValue(value) %7B%0A    const %7B formId, id %7D = this.props%0A    this.props.set(formId, id, value)
+onChange = (event) =%3E %7B%0A    const value = event.target.value%0A    this.setValue(value)%0A  %7D%0A%0A  setValue(value) %7B%0A    const %7B formId, id %7D = this.props%0A    this.props.set(formId, id, value)%0A  %7D%0A%0A  get value() %7B%0A    const %7B formId, store, id %7D = this.props%0A    if (store%5BformId%5D && store%5BformId%5D.fields%5Bid%5D) %7B%0A      return store%5BformId%5D.fields%5Bid%5D%0A    %7D else %7B%0A      return ''%0A    %7D
 %0A  %7D
@@ -1678,18 +1678,13 @@
 his.
-getV
+v
 alue
-()
 ,%0A  

rename value to getter