import React, { Component } from 'react'
import { EasyDraggable, EasyItem } from 'react-easy-dnd'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      itemArray: ['Test 1', 'Test 2', 'Test 3']
    }
  }

  _handleDragStart = (key) => {
    // Getting the key of the item being draged
  }
  _handleDragStop = (index) => {
    // Getting index of final position
  }

  /*
   * This function is required to keep persistance
   */
  _handleItemSwitch = (newArray) => {
    // Getting the new array of items
    // Get key with newArray[index].key
    let temp = []
    for (const item of newArray) {
      temp.push(item.key)
    }
    this.setState({ itemArray: temp })
  }

  _handleItemHover = (key, index) => {
    // key and index of hovered item
  }

  render() {
    return (
      <EasyDraggable
        cursor='grab'
        hSpacing='10px'
        vSpacing='10px'
        onDragStart={this._handleDragStart}
        onDragStop={this._handleDragStop}
        onItemSwitch={this._handleItemSwitch} //Required
        onItemHover={this._handleSwitch}
        itemsPerRow={2}
      >
        {this.state.itemArray.map((item) => (
          <EasyItem key={item}>
            <div className='box'>{item}</div>
          </EasyItem>
        ))}
      </EasyDraggable>
    )
  }
}
export default App