function solve() {
    const baseURL = 'http://localhost:3030/jsonstore/tasks/';
    const foodField = document.getElementById('food');
    const timeField = document.getElementById('time');
    const caloriesField = document.getElementById('calories');
    const addMealBtn = document.getElementById('add-meal');
    const editMealBtn = document.getElementById('edit-meal');
    const loadMealsBtn = document.getElementById('load-meals');
    const mealsList = document.getElementById('list');

    mealsList.innerHTML = '';

    loadMealsBtn.addEventListener('click', loadMeals)


    async function loadMeals() {

        mealsList.innerHTML = '';

        const response = await fetch(baseURL);
        const allData = await response.json();

        for (const meal of Object.values(allData)) {
            let mealContainer = document.createElement('div');
            mealContainer.classList = ['meal'];

            let h2FoodTypeElement = document.createElement('h2');
            h2FoodTypeElement.textContent = meal.food
            let h3TimeElement = document.createElement('h3');
            h3TimeElement.textContent = meal.time;
            let h3CaloriesElement = document.createElement('h3');
            h3CaloriesElement.textContent = meal.calories;

            mealContainer.appendChild(h2FoodTypeElement);
            mealContainer.appendChild(h3TimeElement);
            mealContainer.appendChild(h3CaloriesElement);

            let buttonsContainer = document.createElement('div');
            buttonsContainer.id = 'meal-buttons';

            let changeMealBtn = document.createElement('button');
            changeMealBtn.classList = ['change-meal'];
            changeMealBtn.textContent = 'Change'
            changeMealBtn.addEventListener('click', async () => {
                foodField.value = meal.food;
                timeField.value = meal.time;
                caloriesField.value = meal.calories;

                addMealBtn.disabled = true;
                editMealBtn.disabled = false;

                mealsList.removeChild(mealContainer);

                editMealBtn.addEventListener('click', (e) => {
                    e.preventDefault();

                    meal.food = foodField.value;
                    meal.time = timeField.value;
                    meal.calories = caloriesField.value;

                    fetch(baseURL + meal._id, {
                        method: 'PUT',
                        body: JSON.stringify(meal)
                    })
                    loadMeals();

                    editMealBtn.disabled = true;
                    addMealBtn.disabled = false;
                })
            })

            let deleteMealBtn = document.createElement('button');
            deleteMealBtn.textContent = 'Delete';
            deleteMealBtn.classList = ['delete-meal'];
            deleteMealBtn.addEventListener('click', async () => {
                await fetch(baseURL + meal._id, {
                    method: 'DELETE',
                });
                loadMeals();
            })

            buttonsContainer.appendChild(changeMealBtn);
            buttonsContainer.appendChild(deleteMealBtn);

            mealContainer.appendChild(buttonsContainer);

            mealsList.appendChild(mealContainer);

        }
        editMealBtn.disabled = true;
    }

    addMealBtn.addEventListener('click', async () => {
        let mealObj = {
            food: foodField.value,
            calories: caloriesField.value,
            time: timeField.value,
        }

        await fetch(baseURL, {
            method: 'POST',
            body: JSON.stringify(mealObj)
        });

        foodField.value = '';
        timeField.value = '';
        caloriesField.value = '';

        loadMeals();
    })

}

solve();