todos-functions.ts

"use strict";

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

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

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

// Render application todos based on filters
export function renderTodos(todos: Todo[], filters: Filters): void {
  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("#todos") as HTMLDivElement;
  todosContainer.innerHTML = "";
  todosContainer.appendChild(generateSummaryDOM(incompleteTodos));

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

const toggleTodo = (id: number): void => {
  const todo = todos.find((todo) => todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
};

// Define the Todo interface
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// Define the Filters interface
export interface Filters {
  searchText: string;
  hideCompleted: boolean;
}

// Get the DOM elements for an individual note
const generateTodoDOM = (todo: Todo): HTMLDivElement => {
  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
const generateSummaryDOM = (incompleteTodos: Todo[]): HTMLHeadingElement => {
  const summary = document.createElement("h2");
  summary.classList.add("todo-app__summary");
  summary.textContent = `You have ${incompleteTodos.length} todos left`;
  return summary;
};

// Mock data for todos and filters (you need to define these variables in your code)
const todos: Todo[] = [];
const filters: Filters = {
  searchText: "",
  hideCompleted: false,
};