function attachEvents() {

    const BASE_URL = "http://localhost:3030/jsonstore/tasks/"
    let titleName = document.getElementById("title")
    let loadBtn = document.getElementById("load-button")
    let addBtn = document.getElementById("add-button")
    let toDoList = document.getElementById("todo-list")

    loadBtn.addEventListener("click", loadHandler)



    let newTaskName = ""

    addBtn.addEventListener("click", addHandler)


    function loadHandler(event){
      event.preventDefault()


      // toDoList.innerHTML = ""


      fetch(BASE_URL)
      .then((res) => res.json())
      .then((data) => {

          for (const id in data) {
              let taskName = data[id].name
              let li = createElement("li", "", toDoList)
              createElement("span", taskName, li)
              let removeBtn = createElement("button", "Remove", li)
              let editBtn = createElement("button", "Edit", li)



              // ТОВА НЕ МИНАВА -> КАТО ВЗИМАМ ID-ТО НАПРАВО КАТО КЛЮЧ ОТ РЕЧНИКА
              // li.id = id



              // И ДВЕТЕ РАБОТЯТ ПЕРФЕКНТО В БРАУЗЪРА, НО ДЖЪДЖ ГЪРМИ ТЕСТОВЕ ЗА ТОВА


              // ТОВА МИНАВА -> КАТО ГО ВЗИМАМ КАТО СТОЙНОСТ. ЗАЩО?????????
              li.id = data[id]._id



              removeBtn.addEventListener("click", removeHandler)
              editBtn.addEventListener("click", editHandler)
            }
        })
    }

    function addHandler(event){
      event.preventDefault()

      let httpHeaders = {
        method: "POST",
        body: JSON.stringify({name: `${titleName.value}`})
      }
      fetch(BASE_URL, httpHeaders)
      .then(() => loadHandler())
    }

    function removeHandler(event){
      let li = event.currentTarget.parentElement
      let id = li.id

      let httpHeaders = {
        method: "DELETE"
      }
      fetch(`${BASE_URL}${id}`, httpHeaders)
      .then(() => {loadHandler()})
      .catch((err) => console.error(err))
    }

    function editHandler(event){

      let li = event.currentTarget.parentElement

      let [span, _removeBtn, editBtn] = Array.from(li.children)

      let taskName = span.textContent
      inputField = createElement("input", taskName)
      li.prepend(inputField)
      let submitBtn = createElement("button", "Submit", li)
      submitBtn.addEventListener("click", submitHandler)
      span.remove()
      editBtn.remove()

    }

    function submitHandler(event){

      let li = event.currentTarget.parentElement

      let [input, _removeBtn, submitBtn] = Array.from(li.children)

      let inputValue = input.value

      let httpHeaders = {
        method: "PATCH",
        body: JSON.stringify({name: inputValue})
      }
      fetch(`${BASE_URL}${li.id}`, httpHeaders)
      .then((res) => console.log(""))

      let editBtn = createElement("button", "Edit", li)
      let taskName = input.value

      let task = createElement("span", taskName)
      li.prepend(task)
      submitBtn.remove()
      input.remove()

    }

}

function createElement(type, content, parent, id, classes, attributes){
    let element = document.createElement(type)

    if (content && type !== "input"){
      element.textContent = content
    }

    if (content && type === "input"){
      element.value = content
    }

    if (parent){
      parent.appendChild(element)
    }

    if (id){
      element.id = id
    }

    if (classes){

      element.classList.add(...classes)

    }
    if (attributes){
      for (const key in attributes) {
        element.setAttribute(key, attributes[key])

      }
    }

    return element
  }

attachEvents();