// init
let list = document.querySelector('#my-todo')
let done = document.querySelector('#done-list')
const todos = ['Hit the gym', 'Read a book', 'Buy eggs', 'Organize office', 'Pay bills']
for (let todo of todos) {
  addItem(todo)
}

function addItem (text) {
  let newItem = document.createElement('li')
  newItem.innerHTML = `
    <label for="todo">${text}</label>
    <i class="delete fa fa-trash"></i>
  `
  list.appendChild(newItem)
}

// Add
const addBtn = document.querySelector('#addBtn')
addBtn.addEventListener('click', function () {
  let inputValue = document.querySelector('#newTodo').value
  // add new to-do item to list without no input.
  if (inputValue !== '') {
  addItem(inputValue)    
  }
})

//-----------------------L2A15Q3-----------------------//
// Delete Todo list
list.addEventListener('click', function (event) {
  if (event.target.classList.contains('delete')) {
    let li = event.target.parentElement
    li.remove()
  } else if (event.target.tagName === 'LABEL') {
    let li = event.target.parentElement
    // create an element to done list
    let doneItem = document.createElement('li')
    doneItem.innerHTML = li.innerHTML
    // append child element
    done.appendChild(doneItem)
    doneItem.children[0].classList.toggle('checked')
    // remove the item from todo list
    li.remove()
  } 
})

// Delete Done list
done.addEventListener('click', function (event) {
  if (event.target.classList.contains('delete')) {
    let li = event.target.parentElement
    li.remove()
  } else if (event.target.tagName === 'LABEL') {
    let li = event.target.parentElement
    // create an element to todo list
    let todoItem = document.createElement('li')
    todoItem.innerHTML = li.innerHTML
    // append child element
    list.appendChild(todoItem)
    todoItem.children[0].classList.toggle('checked')
    // remove the item from done list
    li.remove()
  }
})
//-----------------------L2A15Q3-----------------------//


// enter key listener
let placeholder = document.querySelector("#newTodo")
placeholder.addEventListener('keypress', function (event) {
  let inputValue = document.querySelector('#newTodo').value
  if ( event.keyCode == 13 ) {
    if (inputValue !== '') {
    addItem(inputValue)    
    }
  }
})