function attachEvents() {

    const BASE_URL = "http://localhost:3030/jsonstore/tasks/"
    const DELETE_BASE_URL = "http://localhost:3030/jsonstore/tasks/"

    let newTaskName = ""

    let loadBtn = document.getElementById("load-button")
    let addBtn = document.getElementById("add-button")

    let titleName = document.getElementById("title")

    let toDoList = document.getElementById("todo-list")

    loadBtn.addEventListener("click", loadHandler)
    addBtn.addEventListener("click", addHandler)


    function loadHandler(){
      toDoList.innerHTML = ""
      if (event){
        event.preventDefault()
      }
      fetch(BASE_URL, {method: "GET"})
      .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)

              li.id = id

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

    function addHandler(){
      if (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(`${DELETE_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(`${DELETE_BASE_URL}${li.id}`, httpHeaders)

      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();