const BASE_URL = "http://localhost:3030/jsonstore/grocery/"

let tableBody = document.getElementById("tbody")

let products = {}
let idForEdit = null

let inputName = document.getElementById("product")
let inputCount = document.getElementById("count")
let inputPrice = document.getElementById("price")


let loadBtn = document.getElementById("load-product")
let addBtn = document.getElementById("add-product")
let bigUpdateBtn = document.getElementById("update-product")

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


function loadHandler(event){

    if (event){
        event.preventDefault()
    }

    tableBody.innerHTML = ""


    fetch(BASE_URL, {method: "GET"})
    .then((res) => res.json())
    .then((data) => {
        for (const id in data) {

            let tr = createElement("tr", "", tableBody)

            let productInfo = data[id]
            let name = productInfo.product
            let count = productInfo.count
            let price = productInfo.price

            tr.id = id


            products[name] = {count, price, id}

            createElement("td", name, tr, "", ["name"])
            createElement("td", count, tr, "", ["count-product"])
            createElement("td", price, tr, "", ["product-price"])

            let buttonsTd = createElement("td", "", tr, "", ["btn"])

            let updateBtn = createElement("button", "Update", buttonsTd, "", ["update"])
            let deleteBtn = createElement("button", "Delete", buttonsTd, "", ["delete"])

            deleteBtn.addEventListener("click", deleteHandler)
            updateBtn.addEventListener("click", loadUpdateFormHandler)
        }
    })
    .catch((err) => console.error(err))
}

function addHandler(event){
    if (event){
        event.preventDefault()
    }
    let productNameValue = inputName.value
    let productCountValue = inputCount.value
    let productPriceValue =  inputPrice.value

    let httpHeaders = {
        method: "POST",
        body: JSON.stringify({
            product: productNameValue,
            count: productCountValue,
            price: productPriceValue
        })
    }
    fetch(BASE_URL, httpHeaders)
    .then(() => {
        loadHandler()
        inputName.value = ""
        inputCount.value = ""
        inputPrice.value = ""
    })
    .catch((err) => console.error(err))
}

function deleteHandler(event){

    let tr = event.currentTarget.parentElement.parentElement
    let id = tr.id

    let httpHeaders = {
        method: "DELETE"
    }

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

}

function loadUpdateFormHandler(event){
    addBtn.disabled = true
    bigUpdateBtn.disabled = false

    let tr = event.currentTarget.parentElement.parentElement
    let trChildren = Array.from(tr.children)

    idForEdit = tr.id

    let productName = trChildren[0].textContent
    let productInfo = products[productName]

    inputName.value = productName
    inputCount.value = productInfo.count
    inputPrice.value = productInfo.price

}

function updateProductHAndler(event){

    event.preventDefault()

    httpHeaders = {
        method: "PATCH",
        body: JSON.stringify({
            product: inputName.value,
            count: inputCount.value,
            price: inputPrice.value
        })
    }
    fetch(`${BASE_URL}/${idForEdit}`, httpHeaders)
    .then(() => {
        loadHandler()
        inputName.value = ""
        inputCount.value = ""
        inputPrice.value = ""

        addBtn.disabled = false
        bigUpdateBtn.disabled = true
    })
    .catch((err) => console.error(err))
}


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
}