import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './TagSelect.styl'
import _ from 'lodash'
import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
import i18n from 'browser/lib/i18n'

class TagSelect extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      newTag: ''
    }
  }

  componentDidMount () {
    this.value = this.props.value
  }

  componentDidUpdate () {
    this.value = this.props.value
  }

  handleNewTagInputKeyDown (e) {
    switch (e.keyCode) {
      case 9:
        e.preventDefault()
        this.submitTag()
        break
      case 13:
        this.submitTag()
        break
      case 8:
        if (this.refs.newTag.value.length === 0) {
          this.removeLastTag()
        }
    }
  }

  handleNewTagBlur (e) {
    this.submitTag()
  }

  removeLastTag () {
    let { value } = this.props

    value = _.isArray(value)
      ? value.slice()
      : []
    value.pop()
    value = _.uniq(value)

    this.value = value
    this.props.onChange()
  }

  reset () {
    this.setState({
      newTag: ''
    })
  }

  submitTag () {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
    let { value } = this.props
    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
    newTag = newTag.charAt(0) === '#' ? newTag.substring(1) : newTag

    if (newTag.length <= 0) {
      this.setState({
        newTag: ''
      })
      return
    }

    value = _.isArray(value)
      ? value.slice()
      : []
    value.push(newTag)
    value = _.uniq(value)

    this.setState({
      newTag: ''
    }, () => {
      this.value = value
      this.props.onChange()
    })
  }

  handleNewTagInputChange (e) {
    this.setState({
      newTag: this.refs.newTag.value
    })
  }

  handleTagRemoveButtonClick (tag) {
    return (e) => {
      let { value } = this.props

      value.splice(value.indexOf(tag), 1)
      value = _.uniq(value)

      this.value = value
      this.props.onChange()
    }
  }

  render () {
    const { value, className } = this.props

    const tagList = _.isArray(value)
      ? value.map((tag) => {
        return (
          <span styleName='tag'
            key={tag}
          >
            <span styleName='tag-label'>#{tag}</span>
            <button styleName='tag-removeButton'
              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
            >
              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
            </button>
          </span>
        )
      })
      : []

    return (
      <div className={_.isString(className)
          ? 'TagSelect ' + className
          : 'TagSelect'
        }
        styleName='root'
      >
        {tagList}
        <input styleName='newTag'
          ref='newTag'
          value={this.state.newTag}
          placeholder={i18n.__('Add tag...')}
          onChange={(e) => this.handleNewTagInputChange(e)}
          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
          onBlur={(e) => this.handleNewTagBlur(e)}
        />
      </div>
    )
  }
}

TagSelect.propTypes = {
  className: PropTypes.string,
  value: PropTypes.arrayOf(PropTypes.string),
  onChange: PropTypes.func

}

export default CSSModules(TagSelect, styles)
