const contentArea = document.querySelector(".wrapper");
const body = document.querySelectorAll("body");
const tasks = contentArea.children;
const task = document.querySelector(".task");
const checkbox = document.querySelector(".checkbox");
const addTask = document.querySelector(".add");
const taskName = document.querySelector("#inputTaskName");
const showCompletedTasks = document.querySelector(".showCompleted-items-button");
const removedTasks = [];

console.log(tasks);

function print(item) {
  contentArea.innerHTML += item;
}

function createTaskItems(newTask) {
  if (taskName.value == "") {
    alert("There is no value here");
    const error = "error";
    return error;
  } else {
    let taskAreaStyling = document.createElement("div");
    taskAreaStyling.className = "task-content";
    newTask.appendChild(taskAreaStyling);

    let taskTitle = document.createElement("h2");
    taskTitle.className += "task-title";
    taskTitle.innerHTML += taskName.value;
    taskAreaStyling.appendChild(taskTitle);
    console.log(taskName.value);

    let checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.className = "checkbox";
    taskAreaStyling.appendChild(checkbox);

    let upButton = document.createElement("div");
    upButton.className = "up";
    upButton.textContent = "Up";
    taskAreaStyling.appendChild(upButton);

    let downButton = document.createElement("div");
    downButton.className = "down";
    downButton.textContent = "Down";
    taskAreaStyling.appendChild(downButton);

    let completeButton = document.createElement("div");
    completeButton.className = "completed-btn";
    completeButton.textContent = "Completed";
    taskAreaStyling.appendChild(completeButton);
  }
}

for (let i = 0; i < tasks.length; i++) {
  task[i].addEventListener("click", event => {
    if (checkbox.checked == true) {
      task[i].className += " checked ";
    }

    if (checkbox.checked == false) {
      task[i].classList.remove("checked");
    }
  });
}

addTask.addEventListener("click", () => {
  console.log("click");

  const newTask = document.createElement("div");
  newTask.className += "task";

  newTask.addEventListener("click", event => {
    if (event.target.checked == true) {
      newTask.className += " checked ";
    }

    if (event.target.checked == false) {
      newTask.classList.remove("checked");
    }
  });

  if (createTaskItems(newTask) != "error") {
    contentArea.appendChild(newTask);
    taskName.value = "";
  } else {
    //contentArea.appendChild(newTask);
  }
});

showCompletedTasks.addEventListener("click", event => {
  if (showCompletedTasks.innerHTML == "Show Completed Tasks") {
    for (i = 0; i < removedTasks.length; i++) {
      contentArea.appendChild(removedTasks[i]);
     if (tasks[i].className != 'completed') {
              tasks[i].style.display='none';
      } else {
        tasks[i].style.display='block';
      }
    }
    showCompletedTasks.innerHTML = "Hide Completed Tasks";
    addTask.style.display = 'none';
    taskName.style.visibility = 'hidden';
  } else {
    showCompletedTasks.innerHTML = "Show Completed Tasks";
    for (i = 0; i < removedTasks.length; i++) {
      contentArea.removeChild(removedTasks[i]);
      console.log(removedTasks);
    }
    addTask.style.display = 'inline-block';
    taskName.style.visibility = 'visible';
  }
});

contentArea.addEventListener("click", event => {
  console.log("click");

  

  if (event.target.className == "completed-btn") {
    let task = event.target.parentNode.parentNode;
    let taskArea = task.parentNode;
    // let upButton = document.querySelector('div.up');
    // let downButton = document.querySelector('div.down');
    // let tickBox = document.querySelector('input.checkbox');
    // let removeButton = document.querySelector('div.completed-btn');
    // upButton.style.display = 'none';
    // downButton.style.display = 'none';
    // tickBox.style.display = 'none';
    // removeButton.style.display = 'none';
    event.target.previousElementSibling.remove();
    event.target.previousElementSibling.remove();
    event.target.previousElementSibling.remove();
    event.target.remove();
    task.className += " completed ";

    removedTasks.push(taskArea.removeChild(task));
    console.log(removedTasks);
  }
 
  if (event.target.className == "up") {
    let task = event.target.parentNode.parentNode;
    let nextTask = task.previousElementSibling;
    let taskArea = task.parentNode;
    if (nextTask) {
      taskArea.insertBefore(task, nextTask);
    }
  }
  if (event.target.className == "down") {
    let task = event.target.parentNode.parentNode;
    let nextTask = task.nextElementSibling;
    let taskArea = task.parentNode;
    if (nextTask) {
      taskArea.insertBefore(nextTask, task);
    }
  }
});