4. book library

let submitButton = document.getElementById('submit-button');
let loadBookButton = document.getElementById('loadBooks');

let headingTitle = document.getElementById('headingTitle');

loadBookButton.addEventListener('click', reloadTable);

submitButton.addEventListener('click', createBook);

let getTable = document.querySelector('table tbody');

async function reloadTable() {

    Array.from(getTable.querySelectorAll('tr')).forEach(item => item.remove());

    await fetch('http://localhost:3030/jsonstore/collections/books')
        .then(res => res.json())
        .then(data => {
            for (const [key, value] of Object.entries(data)) {
                let createTr = document.createElement('tr');
                let createTitleTd = document.createElement('td');
                let createAuthorTd = document.createElement('td');
                let createEditButton = document.createElement('button');
                let createDeleteButton = document.createElement('button');
                let idTd = document.createElement('td');
                idTd.textContent = key;
                idTd.classList.add('hide');

                createEditButton.textContent = 'Edit';
                createDeleteButton.textContent = 'Delete'; //Edit Delete Events

                createDeleteButton.addEventListener('click', (e) => {
                    let getId = e.currentTarget.parentNode.parentNode.querySelector('.hide').textContent;
                    let url = 'http://localhost:3030/jsonstore/collections/books/';
                    fetch(`${url}${getId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                });


                createEditButton.addEventListener('click', handleEdit);

                async function handleEdit(e) {
                    e.preventDefault();

                    let title = document.getElementById('title');
                    let author = document.getElementById('author');

                    let url = 'http://localhost:3030/jsonstore/collections/books/';
                    let id = e.currentTarget.parentNode.parentNode.querySelector('.hide').textContent;

                    if (title.value !== '' && author.value !== '') {
                        let bookData = {
                            author: author.value,
                            title: title.value
                        }

                        await fetch(`${url}${id}`, {
                            method: 'put',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(bookData)
                        });
                    }


                }



                let createTdButton = document.createElement('td');

                createTdButton.append(createEditButton);
                createTdButton.append(createDeleteButton);


                createTitleTd.textContent = value.title;
                createAuthorTd.textContent = value.author;

                createTr.appendChild(createTitleTd);
                createTr.appendChild(createAuthorTd);
                createTr.appendChild(createTdButton);
                createTr.appendChild(idTd);

                getTable.appendChild(createTr);
            }
        })
}

async function createBook(e) {

    e.preventDefault();

    let title = document.getElementById('title');
    let author = document.getElementById('author');

    if (title.value !== '' && author.value !== '') {
        let bookData = {
            title: title.value,
            author: author.value
        };

        let url = 'http://localhost:3030/jsonstore/collections/books';

        await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(bookData)
        });
    }


}