/*

  THINGS TO NOTE
		- Each task list item has a class of .task
		- When the task is being swiped right, try adding the class of .completing
		- When the task is being swiped left, try adding the class of .deleting
		- A completed task should have a class of .completed
    
    - The check and crosses are added as :before and :after pseudo-elements of the .task li so you don't need to add them
    
      GOOD LUCK!

*/
let tasks = document.getElementsByClassName('task');

const swipe = (elem) => {
  let tolerance = 80
  let taskList = document.getElementsByClassName('task-list')[0]
  let movement
  
  const animateCompleted = () => {
    let offset = 900,
        step = 10
    
    elem.style.marginLeft = offset + 'px'
    
    let animationTime = setInterval(() => {
      if (offset > 0) {
        elem.style.marginLeft = (offset -= 20) + 'px'
      } else {
        clearInterval(animationTime)
      }
    }, step)
  }
  
  const completeTask = () => {
    elem.classList.remove('completing')
    elem.classList.add('completed')
    
    taskList.removeChild(elem)
    taskList.appendChild(elem)
    
    animateCompleted()
  }
  
  const deleteTask = () => {
    elem.classList.remove('deleting')
    taskList.removeChild(elem)
  }
  
  const resetSwipe = () => {
    movement = 0
    elem.style.marginLeft = movement + 'px'
    elem.isMouseDown = false
  }
  
  const resetClasses = () => {
    elem.classList.remove('deleting')
    elem.classList.remove('completing')
  }
  
  const handleMouseMove = (e) => {
    if (elem.isMouseDown) {
      movement += event.movementX;
      elem.style.marginLeft = movement + 'px';
      
      if (movement > tolerance) {
        elem.classList.add('completing')
      } else if (movement < -tolerance) {
        elem.classList.add('deleting')
      } else {
        resetClasses()
      }
    }
  }
  
  const handleMouseOut = (e) => {
    resetSwipe()
    resetClasses()
    elem.removeEventListener('mousemove', handleMouseMove)
  }
  
  const handleMouseUp = (e) => {
    elem.isMouseDown = false
    elem.removeEventListener('mouseout', handleMouseOut)
    
    resetSwipe()
    
    if (elem.classList.contains('completing')) {
      completeTask()
    } else if (elem.classList.contains('deleting')) {
      deleteTask()
    }
  }
  
  const handleMouseDown = (e) => {
    resetSwipe()
    elem.isMouseDown = true;
    elem.addEventListener('mousemove', handleMouseMove, false)
    elem.addEventListener('mouseout', handleMouseOut, false)
  }
  
  elem.addEventListener('mousedown', handleMouseDown, false)
  elem.addEventListener('mouseup', handleMouseUp, false)
}

for (let i = 0; i < tasks.length; i++) {
  tasks[i].id = "task_" + i;
  swipe(tasks[i]);
}