// Constant variables
const FORM = document.querySelector('#addForm');
const TASKLIST = document.querySelector('.list-group');
const FILTER = document.querySelector('#filter');

// Event listeners
FORM.addEventListener('submit', add_task, false);
TASKLIST.addEventListener('click', remove_task, false);
FILTER.addEventListener('keyup', filter_tasks, false);

function get_existing_tasks(){
  let tasks;
  // Check if tasks are already stored
  if(localStorage.getItem('tasks') === null){
    tasks = [];
  }
  else{
    // Set tasks with what's already there
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }
  return tasks;
}

// domcontentloaded event not firing, hence an IIFE function
document.addEventListener('DOMContentLoaded', function () {
  // Fires each time page is refreshed
  tasks = get_existing_tasks();
  // Loop to create the DOM elements to display
  tasks.forEach(function(task) {
    // Get input value
    let newTask = document.createTextNode(task);
    // Create new li element
    let liElement = document.createElement('li');
    // Create delete button element
    let deleteBTN = document.createElement('button');

    //  Add classes
    liElement.className = 'list-group-item';
    deleteBTN.className = 'btn btn-danger btn-lg float-right delete';
    deleteBTN.innerHTML = '<i class="fas fa-trash-alt"></i>';

    // Add to DOM Tree from outside in
    TASKLIST.append(liElement);
    liElement.append(newTask);
    liElement.append(deleteBTN);
  })
}());

function add_task(event){
  event.preventDefault();

  // Get input value
  let newTask = document.querySelector('#task').value;
  // Create new li element
  let liElement = document.createElement('li');
  // Create delete button element
  let deleteBTN = document.createElement('button');

  //  Add classes
  liElement.className = 'list-group-item';
  deleteBTN.className = 'btn btn-danger btn-lg float-right delete';
  deleteBTN.innerHTML = '<i class="fas fa-trash-alt"></i>';

  // Add to DOM Tree from outside in
  TASKLIST.append(liElement);
  liElement.append(newTask);
  liElement.append(deleteBTN);

  // Call function add task to local storage
  store_in_local_storage(newTask);
  
  // Clear input filed(s) on form submit 
  FORM.reset();
}

function store_in_local_storage(task){
  tasks = get_existing_tasks();
  // Add task to tasks array
  tasks.push(task);
  /* You can only store string values in localStorage. 
     You'll need to serialize the array object and 
     then store it in localStorage.
  */
  localStorage.setItem('tasks', JSON.stringify(tasks))
}

function remove_task(event) {
  if(event.target.classList.contains('delete')){
    if(confirm("Are you sure?")){
      let delLiTask = event.target.parentElement;
      TASKLIST.removeChild(delLiTask);
      // Remove from Local Storage
      remove_task_from_local_storage(delLiTask);
    }
  }
}

function remove_task_from_local_storage(delLiTask){
  tasks = get_existing_tasks();
  // Go through each task in localStorage
  tasks.forEach(function(task, index){
    // Determine if selected task matches one in the array
    if(delLiTask.textContent === task){
      // Remove selected task from the tasks array
      tasks.splice(index, 1);
    }
  });
  // Add the remaining tasks to localStorage
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function filter_tasks(event) {
  // Grab and convert to lowercase the users search term
  let text = event.target.value.toLowerCase();
  // Select all the li tasks
  let tasks = TASKLIST.querySelectorAll('li');
  // Create an array of the tasks and traverse them
  let tasksArray = Array.from(tasks);
  for (let i = 0; i < tasksArray.length; i++) {
    let taskName = tasksArray[i].firstChild.textContent;
    // Check if it's a match
    if(taskName.toLowerCase().indexOf(text) != -1){
      // Display task
      tasksArray[i].style.display = 'block';
    }
    else{
      // Don't display task
      tasksArray[i].style.display = 'none';
    }
  }
}