window.addEventListener('load', groceryList);

function groceryList() {
    const BASE_URL = 'http://localhost:3030/jsonstore/grocery/'
    const loadButton = document.getElementById('load-product');
    const updateButton = document.getElementById('update-product');
    const addButton = document.getElementById('add-product');
    const tBody = document.getElementById('tbody');
    const productName = document.getElementById('product');
    const productCount = document.getElementById('count');
    const productPrice = document.getElementById('price');
    let id = null;
    loadButton.addEventListener('click', loadAllProducts);
    addButton.addEventListener('click', addProduct);

    function loadAllProducts(event) {
        event?.preventDefault();
        fetch(BASE_URL)
        .then((response) => response.json())
        .then((data) => {
            tBody.textContent = '';
            for (key in data) {
                const id = data[key]._id;
                let tr = document.createElement('tr');
                let tdName = document.createElement('td');
                let tdCount = document.createElement('td');
                let tdPrice = document.createElement('td');
                let tdAction = document.createElement('td');
                let updateButton = document.createElement('button');
                let deleteButton = document.createElement('button');
                tdName.className = 'name';
                tdCount.className = 'count-product';
                tdPrice.className = 'product-price';
                tdAction.className = 'btn';
                updateButton.className = 'update-btn';
                deleteButton.className = 'delete';
                updateButton.id = id;
                deleteButton.id = id;
                updateButton.textContent = 'Update';
                deleteButton.textContent = 'Delete';
                updateButton.addEventListener('click', updateProduct);
                deleteButton.addEventListener('click', deleteProduct);
                tdName.textContent = data[key].product;
                tdCount.textContent = data[key].count;
                tdPrice.textContent = data[key].price;
                tdAction.append(updateButton, deleteButton);
                tr.append(tdName, tdCount, tdPrice, tdAction);
                tBody.appendChild(tr);
            }
        })
        .catch((err) => {console.error(err)})
    }

    function addProduct(event) {
        event?.preventDefault();
        const httpHeaders = {
            method: 'POST',
            body: JSON.stringify({
                product: productName.value,
                count: productCount.value,
                price: productPrice.value
            })
        }

        fetch(BASE_URL, httpHeaders)
        .then(() => loadAllProducts())
        .catch((err) => {console.error(err)})
        productName.value = '';
        productCount.value = '';
        productPrice.value = '';
    }

    function updateProduct(event) {
        // updateButton.id = event.currentTarget.id;
        id = event.currentTarget.id;
        const currentTableRow = event.currentTarget.parentNode.parentNode;

        productName.value = currentTableRow.querySelector('.name').textContent;
        productCount.value = currentTableRow.querySelector('.count-product').textContent;
        productPrice.value = currentTableRow.querySelector('.product-price').textContent;

        addButton.disabled = true;
        updateButton.disabled = false;
        updateButton.addEventListener('click', updateProductInfo);
    }

    function updateProductInfo(event) {
        // id = event.currentTarget.id;
        const httpHeaders = {
            method: 'PATCH',
            body: JSON.stringify({
                product: productName.value,
                count: productCount.value,
                price: productPrice.value
            })
        }

        fetch(`${BASE_URL}${id}`, httpHeaders)
        // .then(() => loadAllProducts())
        // .catch((err) => {console.error(err)})
        loadAllProducts();
        productName.value = '';
        productCount.value = '';
        productPrice.value = '';
        addButton.disabled = false;
        updateButton.disabled = true;
    }

    function deleteProduct(event) {
        const id = event.currentTarget.id;
        const httpHeaders = {
            method: 'DELETE'
        }

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