const input = document.querySelector("input");
const button = document.querySelector("button");
const todoList = document.querySelector(".todo-list");

// let index = 0;

function getLastIndex() {
  let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
  return Object.keys(tasks).length > 0
    ? Math.max(...Object.keys(tasks).map(Number))
    : 0;
}

function addTask() {
  button.addEventListener("click", function () {
    let index = getLastIndex() + 1;
    let newTask = { text: input.value, completed: false };

    let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
    tasks[index] = newTask; // Добавляем новую задачу
    localStorage.setItem("tasks", JSON.stringify(tasks)); // Сохраняем в localStorage

    renderTasks(); // Перерисовываем список
    input.value = ""; // Очищаем поле ввода
  });
}

function renderTasks() {
  todoList.innerHTML = ""; // Очищаем список перед рендером

  let tasks = JSON.parse(localStorage.getItem("tasks")) || {};

  Object.keys(tasks).forEach((key) => {
    let task = tasks[key];
    const taskHTML = `
        <div class="todo-item" data-id="${key}">
          <label>
            <input class="task-checkbox" type="checkbox" ${
              task.completed ? "checked" : ""
            } />
            <span>${task.text}</span>
          </label>
          <button class="delete-btn">&times;</button>
        </div>
    `;

    todoList.insertAdjacentHTML("afterbegin", taskHTML);
  });
  addDeleteEvents();
  addCheckboxEvents();
}

function addCheckboxEvents() {
  document.querySelectorAll(".task-checkbox").forEach((checkbox) => {
    checkbox.addEventListener("change", function () {
      let taskElement = this.closest(".todo-item");
      let taskId = taskElement.getAttribute("data-id");

      let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
      tasks[taskId].completed = this.checked; // Обновляем статус

      localStorage.setItem("tasks", JSON.stringify(tasks)); // Сохраняем изменения
    });
  });
}

function addDeleteEvents() {
  document.querySelectorAll(".delete-btn").forEach((button) => {
    button.addEventListener("click", function () {
      let taskElement = this.closest(".todo-item");
      let taskId = taskElement.getAttribute("data-id");

      let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
      delete tasks[taskId]; // Удаляем задачу
      localStorage.setItem("tasks", JSON.stringify(tasks));

      renderTasks(); // Перерисовываем список
    });
  });
}

addTask();
renderTasks();