03.Phonebook

function attachEvents() {
    let baseURL = `http://localhost:3030/jsonstore/phonebook`;
    let loadBtn = document.getElementById('btnLoad');
    let addBtn = document.getElementById('btnCreate');
    let phoneBook = document.getElementById('phonebook');

    loadBtn.addEventListener('click', loadPhones);
    addBtn.addEventListener('click', addPhone);

    async function loadPhones () {
        try {
            let response = await fetch(baseURL);
            let phoneData = await response.json();
            let phoneNumbers = Object.values(phoneData);

            phoneBook.replaceChildren();

            for (let entry of phoneNumbers) {
                let liItem = document.createElement('li');
                let deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.dataset.id = entry._id;
                deleteBtn.addEventListener('click', deletePhone);
                liItem.append(`${entry.person}: ${entry.phone}`);
                liItem.appendChild(deleteBtn);

                phoneBook.appendChild(liItem);
            }
        } catch (error) {
            console.error(error);
        }
    }

    async function deletePhone (event) {
        const id = event.target.dataset.id;

        try {
            await fetch(`${baseURL}/${id}`, {
                method: 'DELETE'
            });

            loadPhones();
        } catch (error) {
            console.error('Failed to delete:', error);
        }
    }


    async function addPhone () {
        let newPerson = document.getElementById('person').value;
        let newPhone = document.getElementById('phone').value;

        if (!newPerson || !newPhone) {
            document.getElementById('person').value = '';
            document.getElementById('phone').value = '';
            return;
        }

        let newEntry = {
            person: newPerson,
            phone: newPhone,
        };

        newEntry = JSON.stringify(newEntry);

        await fetch(baseURL, {
            method: 'post',
            headers: { 'Content-type': 'application/json' },
            body: newEntry,
        });

        document.getElementById('person').value = '';
        document.getElementById('phone').value = '';

        loadPhones();
    }
}

attachEvents();