content: require('normalize.css')
  require('./TagList.scss')
  
  import React from 'react'
  
  export default class TagList extends React.Component {
      constructor(props) {
          super(props)
          this.onCheckboxChange = this.onCheckboxChange.bind(this)
          this.onNewTagChange = this.onNewTagChange.bind(this)
          this.onSubmitNewTag = this.onSubmitNewTag.bind(this)
          this.isTagSelected = this.isTagSelected.bind(this)
          this.onDeleteTagClick = this.onDeleteTagClick.bind(this)
          this.getDeleteButton = this.getDeleteButton.bind(this)
          this.getNewTagForm = this.getNewTagForm.bind(this)
      }
  
      onCheckboxChange(event) {
          console.log('TagList:onCheckboxChange() >> checkbox "%s" is now %s', event.target.name, (event.target.checked ? '✓' : '□'))
          const {handleSelectionChange} = this.props
  
          handleSelectionChange(event.target.name, event.target.checked)
      }
  
      onNewTagChange(event) {
          console.log('TagList:onNewTagChange() >> input "%s" updated to %s', event.target.name, event.target.value)
  
          // FIXME: Might need to handle this differently later for complex input types like radios
          this.props.handleNewTagUpdate(event.target.value)
      }
  
      onSubmitNewTag(event) {
          event.preventDefault()
  
          const { handleCreateTag, tags: {newTag} } = this.props
          console.info('onSubmitNewTag() newTag: ', newTag)
          handleCreateTag({ name: newTag })
      }
  
      isTagSelected(tag) {
          const {selectedTags} = this.props
          return selectedTags ? selectedTags.indexOf(tag) >= 0 : false
      }
  
      onDeleteTagClick(event) {
          event.preventDefault()
          const tag = event.target.getAttribute('data-tag-id')
          console.info('onDeleteTagClick() tag ', tag)
  
          this.props.handleDeleteTag(tag)
      }
  
      getDeleteButton(tag) {
          return this.props.showDeleteButtons ? (
              <button className='delete' onClick={ this.onDeleteTagClick } data-tag-id={ tag._id }>X</button>
          ) : null
      }
  
      getNewTagForm(newTag) {
          return this.props.showNewTagForm ? (
              <li className="newTagForm">
                  <input type='text' name='newTag' placeholder='New Tag...' value={ newTag } onChange={ this.onNewTagChange } />
                  <button onClick={ this.onSubmitNewTag }>+</button>
              </li>
          ) : null
      }
  
      render() {
          const { handleCreateTag, handleNewTagUpdate, tags: {items, newTag}, selectedTags } = this.props
          let deleteButton
  
          return (
              <ul className="TagList">
                  { this.getNewTagForm(newTag) }
                  { items.map( tag => {
                      const isSelected = this.isTagSelected( tag._id )
                      return (<li key={tag._id}>
                          <label forHtml={tag._id} className={ isSelected ? 'selected' : '' }>
                              <input type='checkbox'
                                     name={ tag._id }
                                     onChange={ this.onCheckboxChange }
                                     checked={ isSelected } />{ tag.name }
                              { this.getDeleteButton(tag) }
                          </label>
                      </li>
                  )}) }
              </ul>
          )
      }
  }
  