todo.ts

let todos = getSavedTodos();

type Todo = {
  id: string;
  text: string;
  completed: boolean;
};

type Filters = {
  searchText: string;
  hideCompleted: boolean;
};

const filters: Filters = {
  searchText: "",
  hideCompleted: false,
};

renderTodos(todos, filters);

const searchTextInput =
  document.querySelector<HTMLInputElement>("#search-text");

if (searchTextInput) {
  searchTextInput.addEventListener("input", (e: Event) => {
    filters.searchText = (e.target as HTMLInputElement).value;
    renderTodos(todos, filters);
  });
}

const newTodoForm = document.querySelector<HTMLFormElement>("#new-todo");
if (newTodoForm) {
  newTodoForm.addEventListener("submit", (e: Event) => {
    e.preventDefault();
    const id = generateUniqueId();

    if (e.target instanceof HTMLFormElement) {
      const textInput = e.target.elements.namedItem("text") as HTMLInputElement;

      if (textInput) {
        todos.push({
          id: id,
          text: textInput.value,
          completed: false,
        });

        saveTodos(todos);
        renderTodos(todos, filters);
        textInput.value = "";
      }
    }
  });
}

const hideCompleted =
  document.querySelector<HTMLInputElement>("#hide-completed");

if (hideCompleted) {
  hideCompleted.addEventListener("change", (e: Event) => {
    const inputElement = e.target as HTMLInputElement;

    if (inputElement) {
      filters.hideCompleted = inputElement.checked;
      renderTodos(todos, filters);
    }
  });
}

// Fetch existing todos from localStorage
function getSavedTodos() {
  const todosJSON = localStorage.getItem("todos");
  try {
    return todosJSON ? JSON.parse(todosJSON) : [];
  } catch (e) {
    return [];
  }
}

// Save todos to localStorage
function saveTodos(todos: Todo[]): void {
  localStorage.setItem("todos", JSON.stringify(todos));
}

//Remove todo from the list
function removeTodo(id: string) {
  const todoIndex = todos.findIndex((todo: Todo) => todo.id === id);
  if (todoIndex > -1) {
    todos.splice(todoIndex, 1);
  }
}

// Render application todos based on filters
function renderTodos(todos: Todo[], filters: Filters) {
  const filteredTodos = todos.filter((todo) => {
    const searchTextMatch = todo.text
      .toLowerCase()
      .includes(filters.searchText.toLowerCase());
    const hideCompletedMatch = !filters.hideCompleted || !todo.completed;
    return searchTextMatch && hideCompletedMatch;
  });

  const incompleteTodos = filteredTodos.filter((todo) => !todo.completed);

  const todosContainer = document.querySelector<HTMLDivElement>("#todos");

  if (todosContainer) {
    todosContainer.innerHTML = "";
    todosContainer.appendChild(generateSummaryDOM(incompleteTodos));

    filteredTodos.forEach((todo) =>
      todosContainer.appendChild(generateTodoDOM(todo))
    );
  }
}

function toggleTodo(id: string) {
  const todo = todos.find((todo: Todo) => todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
}

// Get the DOM elements for an individual note
function generateTodoDOM(todo: Todo) {
  const todoEl = document.createElement("div");
  todoEl.classList.add("todo-app__item");

  const checkbox = document.createElement("input");
  checkbox.classList.add("todo-app__item-status");

  const checkboxContainer = document.createElement("label");
  checkboxContainer.classList.add("todo-app__custom-container");

  const customCheckbox = document.createElement("span");
  customCheckbox.classList.add("todo-app__custom-checkbox");

  const todoText = document.createElement("p");
  todoText.classList.add("todo-app__item-link");

  const removeButton = document.createElement("button");
  removeButton.classList.add("todo-app__button-remove");

  // Setup todo checkbox
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = todo.completed;
  checkboxContainer.appendChild(checkbox);
  todoEl.appendChild(checkboxContainer);
  checkboxContainer.appendChild(customCheckbox);
  checkbox.addEventListener("change", () => {
    toggleTodo(todo.id);
    saveTodos(todos);
    renderTodos(todos, filters);
  });

  // Setup the todo text
  todoText.textContent = todo.text;
  checkboxContainer.appendChild(todoText);

  // Setup the remove button
  todoEl.appendChild(removeButton);

  removeButton.addEventListener("click", () => {
    removeTodo(todo.id);
    saveTodos(todos);
    renderTodos(todos, filters);
  });
  return todoEl;
}

// Get the DOM elements for list summary
function generateSummaryDOM(incompleteTodos: Todo[]) {
  const summary = document.createElement("h2");
  summary.classList.add("todo-app__summary");
  summary.textContent = `You have ${incompleteTodos.length} todos left`;
  return summary;
}

function generateUniqueId() {
  const randomHex = Math.random().toString(16).slice(2);
  const timestampHex = Date.now().toString(16);
  const uniqueId = randomHex + timestampHex;
  return uniqueId;
}