import * as data from './mydata.js';
import createElement from './mydom.js';

window.addEventListener('load',() => {
    const elements = {
        submitButton() {return document.querySelector('form > button')},
        titleElement() {return document.querySelector('#title')},
        authorElement() {return document.querySelector('#author')},
        isbnElement() {return document.querySelector('#isbn')},
        tableBody() {return document.querySelector('table > tbody')}
    };

    elements.submitButton().addEventListener('click', onSubmitButtonClick);

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

        const title = elements.titleElement().value;
        const author = elements.authorElement().value;
        const isbn = elements.isbnElement().value;

        if (!title || !author || !isbn) {
            alert('Please fill all fields.');
            return;
        }

        const book = {title, author, isbn};

        try {
            const created = await data.createBook(book)
            elements.tableBody().appendChild(createBookInTable(created))
        } catch (error) {
            alert(error)
        }
    }

    function createBookInTable(book) {

        const title = elements.titleElement().value;
        const author = elements.authorElement().value;
        const isbn = elements.isbnElement().value

        const editButton = createElement('button');
        editButton.addEventListener('click', 'Edit', () => {
            alert("Edited");
        });

        const deleteButton = createElement('button');
        deleteButton.addEventListener('click', 'Delete', () => {
            newBook.remove();
        });

        const newBook = createElement('tr', [
            createElement('td', book.title),
            createElement('td', book.author),
            createElement('td', book.isbn),
            createElement('td', [
                editButton,
                deleteButton
            ])
        ])

        return newBook;
    }
})