Приложение TODO. Разделение на локальное хранилище и сервер

function createAppTitle(title) {
  let appTitle = document.createElement('h2');
  appTitle.innerHTML = title;
  return appTitle;
}
 
function createTodoItemForm() {
  let form = document.createElement('form');
  let input = document.createElement('input');
  let buttonWrapper = document.createElement('div');
  let button = document.createElement('button');
 
  form.classList.add('input-group', 'mb-3');
  input.classList.add('form-control');
  input.placeholder = 'Введите название нового дела';
  buttonWrapper.classList.add('input-group-append');
  button.classList.add('btn', 'btn-primary');
  button.textContent = 'Добавить дело';
  button.disabled = true;
 
  buttonWrapper.append(button);
  form.append(input);
  form.append(buttonWrapper);
 
  input.addEventListener('input', function(e) {
    e.preventDefault();
    button.disabled = !input.value.length;
  });
 
  return {
    form,
    input,
    button,
  };
}
 
function createTodoList() {
  let list = document.createElement('ul');
  list.classList.add('list-group');
  return list;
}
 
function createTodoItemElement(todoItem, { onDone, onDelete }) {
  const doneClass = 'list-group-item-success';
 
  let item = document.createElement('li');
  let buttonGroup = document.createElement('div');
  let doneButton = document.createElement('button');
  let deleteButton = document.createElement('button');
 
  item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
  if (todoItem.done) {
    item.classList.add(doneClass);
  }
  item.textContent = todoItem.name;
 
  buttonGroup.classList.add('btn-group', 'btn-group-sm');
  doneButton.classList.add('btn', 'btn-success');
  doneButton.textContent = 'Готово';
  deleteButton.classList.add('btn', 'btn-danger');
  deleteButton.textContent = 'Удалить';
 
  doneButton.addEventListener('click', () => {
    onDone({ todoItem, element: item });
    item.classList.toggle(doneClass, todoItem.done);
  });
  deleteButton.addEventListener('click', () => {
    onDelete({ todoItem, element: item });
  });
 
  buttonGroup.append(doneButton);
  buttonGroup.append(deleteButton);
  item.append(buttonGroup);
 
  return item;
}
 
async function createTodoApp(container, {
  title,
  owner,
  isLocal,
  todoItemList = [],
  onCreateFormSubmit,
  onDoneClick,
  onDeleteClick,
}) {
  const todoAppTitle = createAppTitle(title);
  const todoItemForm = createTodoItemForm();
  const todoList = createTodoList();
  const handlers = {onDone: onDoneClick, onDelete: onDeleteClick};
 
  const currentStorage = document.createElement('div');
  currentStorage.textContent = `Текущее хранилище: ${isLocal ? "Локальное хранилище" : "Удаленное хранилище"}`;
  const storageSwitchButton = document.createElement('button');
  storageSwitchButton.textContent = "Сменить хранилище";
 
  container.append(todoAppTitle, todoItemForm.form, todoList, storageSwitchButton, currentStorage);
 
  todoItemList.forEach(todoItem => {
    const todoItemElement = createTodoItemElement(todoItem, handlers);
    todoList.append(todoItemElement);
  });
 
  storageSwitchButton.addEventListener('click', async e => {
    window.location.search = `is-local=${!isLocal ? '1' : '0'}`
  });
 
 
  todoItemForm.form.addEventListener('submit', async e => {
    e.preventDefault();
    if (!todoItemForm.input.value) {
      return;
    }
 
    const todoItem = await onCreateFormSubmit({
      owner,
      name: todoItemForm.input.value.trim(),
    });
 
    const todoItemElement = createTodoItemElement(todoItem, handlers);
 
    todoList.append(todoItemElement);
 
    todoItemForm.input.value = '';
  })
}
 
export {createTodoApp};