function grocery_store() {
    let main_url = 'http://localhost:3030/jsonstore/grocery/'
    const load_btn = document.getElementById('load-product')
    const table_body_element = document.getElementById('tbody')
    const add_btn = document.getElementById('add-product')
    const update_product_btn = document.getElementById('update-product')
    const product_input = document.getElementById('product')
    const count_input = document.getElementById('count')
    const price_input = document.getElementById('price')

    load_btn.addEventListener("click", load_products)
    add_btn.addEventListener("click", add_product)


    function load_products(load_event) {
        if (load_event) {
            load_event.preventDefault()
        }

        table_body_element.innerHTML = ''
        fetch(main_url)
            .then((res) => res.json())
            .then((data) => {
                let products = Object.values(data)
                for (const product of products) {
                    let tr = create_element('tr', '', table_body_element, product._id)
                    let name_td = create_element('td', product.product, tr, '', 'name')
                    let count_td = create_element('td', product.count, tr, '', 'count-product')
                    let price_td = create_element('td', product.price, tr, '', 'product-price')
                    let btn_td = create_element('td', '', tr, '', 'btn')
                    let update_btn = create_element('button', 'Update', btn_td, '', 'update', product_update)
                    let delete_btn = create_element('button', 'Delete', btn_td, '', 'delete', product_delete)
                }
            })
    }

    function add_product(add_event) {
        add_event.preventDefault()
        let product = product_input.value
        let count = count_input.value
        let price = price_input.value

        let add_http_headers = {
            method: "POST",
            body: JSON.stringify({product, count, price})
        }

        fetch(main_url, add_http_headers)
            .then(() => {
                load_products()
            })
        product_input.value = ''
        count_input.value = ''
        price_input.value = ''
    }
    function product_update(update_event) {
        let current_update_element = update_event.currentTarget.parentElement.parentElement
        let update_id = current_update_element.id
        let update_url = `${main_url}${update_id}`
        let update_info = Array.from(current_update_element.children)
        let product = update_info[0].textContent
        let count = update_info[1].textContent
        let price = update_info[2].textContent

        add_btn.disabled = true
        update_product_btn.disabled = false

        product_input.value = product
        count_input.value = count
        price_input.value = price

        update_product_btn.addEventListener("click", () => {
            let update_http_headers = {
                method: 'PATCH',
                body: JSON.stringify({product: product_input.value, count: count_input.value, price: price_input.value})
            }
            fetch(update_url, update_http_headers)
                .then(() => {
                    load_products()
                })
            product_input.value = ''
            count_input.value = ''
            price_input.value = ''

            add_btn.disabled = false
            update_product_btn.disabled = true
        })
    }

    function product_delete(delete_event) {
        let delete_id = delete_event.currentTarget.parentElement.parentElement.id
        let delete_url = `${main_url}${delete_id}`

        let delete_http_headers = {
            method: "DELETE"
        }

        fetch(delete_url, delete_http_headers)
            .then(() => {
                load_products()
            })
    }


    function  create_element(element_type, element_content, parent_element, id, element_class, event) {
        let current_element = document.createElement(element_type)
        if (element_content) {
            current_element.textContent = element_content
        }
        if (id) {
            current_element.id = id
        }
        if (event) {
            current_element.addEventListener('click', event)
        }
        if (element_class) {
            current_element.classList.add(element_class)
        }
        parent_element.appendChild(current_element)
        return current_element
    }
}

grocery_store()