const container = document.querySelector(".container");
const todoForm = container.querySelector("#submit-todo");
const todoList = container.querySelector("ul.todo-list");
const message = container.querySelector(".message");

todoForm.addEventListener("submit", (e) => {
  // Prevent the default action of the form
  e.preventDefault();
  // Grab the input by it's name
  const todoText = e.target.querySelector('input[name="todo"]');
  // Grab the input's value
  const todoValue = todoText.value;

  if (!todoValue) {
    // There is no value, alert the user
    alert("Please add the value for todo!");
    // Add validation class to the input
    todoText.classList.add("validation-red");
    // Stops further execution
    return;
  }
  // Input had the validation class but now doesn't anymore
  if (todoText.classList.contains("validation-red")) {
    // We passed the validation this time so remove it
    todoText.classList.remove("validation-red");
  }
  // Create the template using of the list item
  const tpl = `
  <li class="list-item">
      <input type="checkbox" class="mark-done"/>
      <span>${todoValue}</span><button class="delete-task">Delete</button>
  </li>
  `;
  // Insert new list item after ul begins
  todoList.insertAdjacentHTML("afterbegin", tpl);
  // Update the task count
  updateTaskCount();
  // Create delete button events
  addDeleteEvents();
  // Add checkbox events
  addMarkCompletedEvents();
  // Reset the input field value
  todoText.value = "";
});

const addDeleteEvents = () => {
  container.querySelectorAll(".delete-task").forEach((button) => {
    button.addEventListener("click", (e) => {
      deleteTask(e.target);
      e.stopImmediatePropagation();
    });
  });
};

const addMarkCompletedEvents = () => {
  container.querySelectorAll(".mark-done").forEach((checkBox) => {
    checkBox.addEventListener("change", (e) => {
      markAsCompleted(e.target);
      e.stopImmediatePropagation();
    });
  });
};

const deleteTask = (button) => {
  let task = button.parentElement;
  let taskText = task.querySelector("span");
  task.remove();
  updateTaskCount();
  alert(`Task ${taskText.innerText} removed!`);
};

const markAsCompleted = (checkbox) => {
  let taskText = checkbox.parentElement.querySelector("span");
  let checked = checkbox.checked;
  if (checked) {
    taskText.style = "text-decoration:line-through;";
  } else {
    taskText.style = "text-decoration:unset;";
  }
};

const updateTaskCount = () => {
  let tasksCount = todoList.childElementCount;
  message.innerText = `You have ${tasksCount} ${
    tasksCount === 1 ? "task" : "tasks"
  } !`;
};