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;
}

// get the siblings of an element
function getSiblings(elem) {
    let siblings = [];
    let sibling = elem.parentNode.firstChild;
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== elem) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling
    }
    return siblings;
};

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);
  expandableSummary.appendChild(div);
  expandable.appendChild(expandableSummary);
  listItem.appendChild(expandable);
  list.appendChild(listItem);
  input.focus();

  // hide the input field on blur
  input.addEventListener('blur', () => {
    if (text.textContent.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;');

  // stop bubbling up on iconsContainer elements
  iconsContainer.addEventListener('click', (event) => {
    if(event.target && event.target.nodeName == "I") {
          event.preventDefault();
      }
  })

  // After collapsing and then expanding, all the childrens should have their children list collapsed.
  expandable.addEventListener("toggle", () => {
    if (!expandable.open) {
      const childExpandables = expandable.querySelectorAll('details');
      childExpandables.forEach(item => item.removeAttribute('open'));
    }
  });

  // add functionality for the addIcon
  addIcon.addEventListener('click', () => 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();
      }
    }
    else {
      listItem.remove();
    }
    if (!list.querySelector('.list-item')) {
      list.remove();
    }
  });

  // add functionality for the checkIcon
  checkIcon.addEventListener('click', (event) => {
    const parentLi = event.target.closest('.list-item');
    // console.log(parentLi);
    if (parentLi.querySelector('.list-item')) {
      console.log (parentLi.querySelector('.list-item'));
      return;
    }
    text.setAttribute('style', 'text-decoration: line-through;');
    checkIcon.setAttribute('style', 'display:none;');
    uncheckIcon.setAttribute('style', 'display:initial;');
    let ok = true;

    const parentLiSiblings = getSiblings(parentLi);
    parentLiSiblings.forEach(item => {
      if (item.querySelector('.fa-check').getAttribute('style') !== 'display:none;') {
        ok = false;
      }
    });
    if (ok) {
      parentLi.parentNode.closest('.list-item').querySelector('.fa-check').click();
    }
  });

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

mainSetup();