let classnames = classNames
let data = [{
  icebox: true,
  type: 'First Icebox',
  content: [{
    id: 100,
    name: 'Build application server'
  }, {
    id: 101,
    name: 'Continue Coding'
  }]
}, {
  type: 'Icebox',
  content: [{
    id: 104,
    name: 'Programming'
  }]
}, {
  type: 'Doing',
  content: [
  ]
}, {
  type: 'Done',
  content: [
    
  ]
}]
let newId = 0
let listener = new EventEmitter()

let createNewData = () => {
  newId = Math.floor(Math.random() * 100000000000)
  data[0].content.push({
    id: newId,
    name: ''
  })
  console.log('Modified data', data)
  listener.emit('moved')
  
}

let editData = (itemType, id, idx, editedText) => {
  data = data.map(obj => {
    let rObj = obj
    if(rObj.type === itemType) {
      rObj.content = rObj.content.map(obj => {
        if(obj.id === id) {
          return {
            ...obj,
            name: editedText
          }
        }
        return obj
      })
    }
    return rObj
  })
  console.log(data)
  listener.emit('moved')
}

let mutateData = (id, value, currentType, type) => {
  data = data.map(obj => {
    let rObj = obj
    if(rObj.type === currentType) {
      // We have to remove the element
      rObj.content = rObj.content.filter(obj => {
        return obj.id !== id
      })
      console.log('Content: ', rObj.content)
    }
    if(rObj.type === type) {
      console.log('Value: ', value)
      rObj.content.push({
        id,
        name: value
      })
    }
    return rObj
  })
  console.log('Modified data: ', data)
  listener.emit('moved')
}

let { DragSource, DropTarget, DragDropContext } = ReactDnD
//ReactDnDHTML5Backend

let itemTypes = {
  CARD: 'card'
}


class CardDrop extends React.Component {
  render() {
    let { type, connectDropTarget, isOver, children } = this.props
    return connectDropTarget (
      <div className="drop-area">
          {children}
      </div>
    )
  }
}

let cardTarget = {
  drop(props, monitor) {
    const items = monitor.getItem()
    let {type} = props
    let {currentType, value, id} = items
    // Mutate data
    console.log('Item: ', value, id)
    mutateData(id, value, currentType, type)
  }
}

let collectDrop = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  }
}

CardDrop = DropTarget(itemTypes.CARD, cardTarget, collectDrop) (CardDrop) 

class Card extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      focus: false
    }
  }
  loseFocus() {
    this.setState({
      focus: false
    })
    newId = 0
  }
  handleKeyUp(e) { 

    
  }
  
  edit() {
    console.log('Edited')
    
    this.setState({
      focus: true
    })
 
  }
  onFocus() {
    console.log('Going toPreparing to focus')
  }
  onChange(e) {
    console.log('Value preparing to change', e.target.value)
    let {pos, id, type} = this.props
    console.log('DOM', ReactDOM.findDOMNode(this.refs.textarea).rows)
    console.log('Val: ', this.refs.textarea.value)
    editData(type, id, pos, e.target.value)
  }
  componentDidMount() {
    let {newItem} = this.props
    console.log('New: ', newItem)
    if(newItem) {
      ReactDOM.findDOMNode(this.refs.textarea).focus()
 
    }
  }
  componentDidUpdate() {
    let {focus} = this.state 
    if(focus) { 
      ReactDOM.findDOMNode(this.refs.textarea).focus() 
    }
    
  }
  render() {
    let {value, isDragging, empty, connectDragSource, newItem, pos, id} = this.props
    console.log('Id: ', id, 'Valuess: ', value)
    return connectDragSource(
      <div>
<div className="label-wrapper">
          <textarea onKeyUp={() => this.handleKeyUp()} onFocus={this.onFocus} 
            onChange={(e)=>this.onChange(e)} autofocus={this.state.focus} ref="textarea" onBlur={()=>this.loseFocus()}  className="label" type="text" value={value}  placeholder="Placeholder" disabled={!this.state.focus && !newItem}></textarea>
          <a class="btn" onClick={()=>this.edit()}>
            <i  className="fa fa-pencil-square-o" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    )
  }
}

let collect = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

const cardSource = {
  beginDrag(props) {
    console.log('Props: ', props)
    return {
      value: props.value,
      currentType: props.type,
      id: props.id
    }
  }
}

Card = DragSource(itemTypes.CARD, cardSource, collect) (Card)

class CardDeck extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: data
    }
    listener.on('moved', changes => {
      console.log(data)
      this.setState({
        data: data
      })
    })
  }
  addItem() {
    console.log('We have added items')
    createNewData()
  }
  renderCards() {
    console.log('Updated data: ', this.state.data)
    return this.state.data.map(obj => {
      let containerStyle = classnames({
        'label-container': true,
        'icebox': false
      })
      console.log('Content: ', obj)
      return (
        <div className={containerStyle}>
          <div className="panel">
            <h3 className="panel-label">{obj.type}</h3>
          </div>
          <CardDrop type={obj.type}>
             {obj.content.map((val, idx) => {
              let empty = val.name === ''
              let newItem = val.id === newId
              console.log('name: ', val.name)
              return (
                <Card empty={empty} type={obj.type} pos={idx} id={val.id} value={val.name} newItem={newItem}/>
              )
              })}
              {obj.icebox && (
                <button onClick={()=>this.addItem()} className="plus" type="button">+</button>
              )}
          </CardDrop>
        </div>
      )
    })
  }
  render() {
    return (
      <div className="tag-wrapper">
        {this.renderCards()}
     </div>
     )
  }
}


class Container extends React.Component {
  render() {
    return (
      <CardDeck/>
    )
  }
}

Container = DragDropContext(ReactDnDHTML5Backend) (Container)

ReactDOM.render(<Container />, document.getElementById('container'))