function mainSetup() {
  // add item to the end of the list
  const mainContainer = document.getElementById("main");
  const addButton = document.createElement("button");
  addButton.textContent = "Add item";
  addButton.addEventListener('click', () => createItem(mainContainer));
  mainContainer.appendChild(addButton);
}

// create icon using fontAwesome
function createIcon(fontAwesomeClass, tooltip, container) {
  const icon = document.createElement("i");
  icon.classList.add('fas', fontAwesomeClass);
  icon.setAttribute('title', tooltip);
  container.appendChild(icon);
  return icon;
}

function createItem(parent) {
  let list = parent.querySelector('.list');
  if (!list) {
    list = document.createElement('ul');
    list.classList.add('list');
    parent.append(list);
  }

  const listItem = document.createElement("li");
  listItem.classList.add('list-item', 'editable');
  const expandable = document.createElement("details");
  expandable.setAttribute('open', 'true');
  const expandableSummary = document.createElement("summary");
  const detailsContainer = document.createElement("div");
  detailsContainer.classList.add('details');
  const div = document.createElement("div");
  const input = document.createElement("input");
  input.classList.add('text-input');
  const text = document.createElement("span");
  text.classList.add('text-container');

  const err = document.createElement("span");
  err.textContent = "Please enter some text before pressing Enter."
  err.setAttribute('style', 'display:none;');

  // hide the input field and save the text when pressing the ENTER key
  input.addEventListener('keydown', event => {
    if(event.key === 'Enter') {
      if (input.value.length) {
        text.textContent = input.value;
        input.setAttribute('style', 'display:none;');
        err.setAttribute('style', 'display:none;');
      }
      else {
        err.setAttribute('style', 'display:visible;');
        err.setAttribute('style', 'color: red;');
      }
    }
  })

  div.appendChild(input);
  div.appendChild(err);
  detailsContainer.appendChild(text);
  expandableSummary.appendChild(detailsContainer);
  expandable.appendChild(expandableSummary);
  expandable.appendChild(div);
  listItem.appendChild(expandable);
  list.appendChild(listItem);
  input.focus();

  // hide the input field on blur
  input.addEventListener('blur', () => {
    if (input.value.length) {
      listItem.classList.remove('editable');
    } else {
      listItem.remove();
    }
  })

  // display the edit, add, delete and complete icons in a container, next to the list item
  const iconsContainer = document.createElement("span");
  iconsContainer.classList.add('icons-container');
  detailsContainer.appendChild(iconsContainer);

  const editIcon = createIcon('fa-edit', 'Edit item', iconsContainer);
  const addIcon = createIcon('fa-plus', 'Add item', iconsContainer);
  const deleteIcon = createIcon('fa-trash-alt', 'Delete item', iconsContainer);
  const checkIcon = createIcon('fa-check', 'Check item', iconsContainer);
  const uncheckIcon = createIcon('fa-times-circle', 'Uncheck item', iconsContainer);
  uncheckIcon.setAttribute('style', 'display:none;');

  // add functionality for the addIcon
  addIcon.addEventListener('click', (event) => {
    event.preventDefault();
    createItem(expandable);
  });

  // add functionality for the editIcon
  editIcon.addEventListener('click', () => {
    listItem.classList.add('editable');
    input.value = text.textContent;
    input.setAttribute('style', 'display:initial;');
    input.focus();
  });

  // add functionality for the deleteIcon
  deleteIcon.addEventListener('click', () => {
    let childList = listItem.querySelector('.list');
    if (childList) {
      let notification = confirm("Atention! This item has children and they will be also removed!");
      if (notification == true) {
        listItem.remove();
      }
    }
    listItem.remove();
    if (!list.children) {
      list.remove();
    }
  });

  // add functionality for the checkIcon
  checkIcon.addEventListener('click', () => {
    text.setAttribute('style', 'text-decoration: line-through;');
    checkIcon.setAttribute('style', 'display:none;');
    uncheckIcon.setAttribute('style', 'display:visible;');
  });

  // add functionality for the uncheckIcon
  uncheckIcon.addEventListener('click', () => {
    text.setAttribute('style', 'text-decoration: none;');
    uncheckIcon.setAttribute('style', 'display:none;');
    checkIcon.setAttribute('style', 'display:visible;');
  });

}

mainSetup();