text: import PropTypes from 'prop-types'
  import React from 'react'
  import _ from 'lodash'
  
  class TextArea extends React.Component {
  
    static propTypes = {
      autogrow: PropTypes.bool,
      defaultValue: PropTypes.string,
      disabled: PropTypes.bool,
      id: PropTypes.string,
      label: PropTypes.string,
      maxLength: PropTypes.number,
      placeholder: PropTypes.string,
      rows: PropTypes.number,
      tabIndex: PropTypes.number,
      value: PropTypes.string,
      onBusy: PropTypes.func,
      onChange: PropTypes.func,
      onReady: PropTypes.func
    }
  
    static defaultProps = {
      autogrow: true,
      disabled: false,
      maxLength: null,
      placeholder: '',
      rows: 5,
      tabIndex: 0,
      onBusy: () => {},
      onChange: () => {},
      onReady: () => {}
    }
  
    input = null
  
    state = {
      focused: false,
      offset: 0,
      value: ''
    }
  
    _handleBlur = this._handleBlur.bind(this)
    _handleChange = this._handleChange.bind(this)
    _handleClear = this._handleClear.bind(this)
    _handleFocus = this._handleFocus.bind(this)
    _handleKeyUp = this._handleKeyUp.bind(this)
    _handleResize = this._handleResize.bind(this)
    _handleUpdate = this._handleUpdate.bind(this)
  
    render() {
      const { disabled, maxLength } = this.props
      const { value } = this.state
      return (
        <div className={ this._getClass() }>
          { maxLength &&
            <div className={ this._getMaxClass() }>
              { value.length } / { maxLength }
            </div>
          }
          <div className="maha-input-field">
            <textarea { ...this._getTextArea() } />
          </div>
          { value && value.length > 0 && !disabled &&
            <div className="maha-input-clear" onClick={ this._handleClear }>
              <i className="fa fa-times" />
            </div>
          }
        </div>
      )
    }
  
    componentDidMount() {
      const defaultValue = this._getDefaultValue()
      if(!_.isNil(defaultValue)) this._handleSet(defaultValue)
      this.setState({
        offset: this.input.offsetHeight - this.input.clientHeight
      })
      this.props.onReady()
    }
  
    componentDidUpdate(prevProps, prevState) {
      if(this.props.value !== prevProps.value) {
        this._handleSet(this.props.value)
      }
      if(this.state.value !== prevState.value) {
        this._handleChange()
      }
    }
  
    _getClass() {
      const { disabled, label, maxLength } = this.props
      const classes = ['maha-input','maha-textarea']
      if(!label && maxLength !== null) classes.push('unlabeled')
      if(disabled) classes.push('disabled')
      return classes.join(' ')
    }
  
    _getDefaultValue() {
      const { defaultValue, value } = this.props
      return !_.isNil(defaultValue) ? defaultValue : !_.isNil(value) ? value : null
    }
  
    _getMaxClass() {
      const { value } = this.state
      const { maxLength } = this.props
      const classes = ['maha-input-extra']
      if(value.length >= maxLength) classes.push('max')
      return classes.join(' ')
    }
  
    _getPlaceholder() {
      const { label, placeholder } = this.props
      return placeholder || `Enter ${label}`
    }
  
    _getTextArea() {
      const { id, label, disabled, tabIndex } = this.props
      const { focused, value } = this.state
      return {
        disabled,
        id,
        'aria-label': label,
        placeholder: !focused ? this._getPlaceholder() : null,
        ref: node => this.input = node,
        tabIndex,
        value,
        onBlur: this._handleBlur,
        onChange: this._handleUpdate,
        onFocus: this._handleFocus,
        onKeyUp: this._handleKeyUp
      }
    }
  
    _handleBlur() {
      this.setState({
        focused: false
      })
    }
  
    _handleChange() {
      this.props.onChange(this.state.value)
    }
  
    _handleClear() {
      this._handleSet('')
    }
  
    _handleFocus() {
      this.setState({
        focused: true
      })
    }
  
    _handleKeyUp(e) {
      if(!this.props.autogrow) return
      this._handleResize()
    }
  
    _handleResize() {
      const { offset } = this.state
      this.input.style.height = 'auto'
      this.input.style.height = this.input.scrollHeight + offset + 'px'
    }
  
    _handleUpdate(e) {
      this._handleSet(e.target.value)
    }
  
    _handleSet(val) {
      const value = `${val}`
      if(this.props.maxLength && value.length > this.props.maxLength) return
      this.setState({ value }, this._handleResize)
    }
  
  }
  
  export default TextArea
  