"use strict";

console.log("App");

let addForm = document.getElementById("addFormElement");
addForm.addEventListener("submit", addBook);

let bookTable = document.getElementById("bookTableBody");

let lastBookId = 0;
function genBookId() {
    return lastBookId++;
}

let books = {};

function addBook(event){
    event.preventDefault();
    console.log("Add Book", event.target.bookTitle.value);
    let bookId = genBookId();

    let book = {
        title: event.target.bookTitle.value,
        genre: event.target.bookGenre.value,
        desc: event.target.bookDesc.value
    }

    books[bookId] = book;

    let row = `
    <tr id="bookRow${bookId}">
        <td>${bookId + 1}</td>
        <td>${book.title}</td>
        <td>${book.genre}</td>
        <td>${book.desc}</td>
        <td>
            <button onclick="editBook(${bookId})">Edit</button>
            <button onclick="deleteBook(${bookId})">Delete</button>
        </td>
    </tr>
    `

    bookTable.innerHTML = bookTable.innerHTML + row;
}

function deleteBook(bookId) {
    console.log("Delete Book", bookId);

    let rowElement = document.getElementById("bookRow"+bookId);
    bookTable.removeChild(rowElement);

    delete books[bookId];
}

function editBook(bookId) {
    console.log("Edit book");
    let rowElement = document.getElementById("bookRow"+bookId);

    let book = books[bookId];

    addForm.bookTitle.value = book.title;
    addForm.bookGenre.value = book.genre;
    addForm.bookDesc.value = book.desc;

    addForm.submit.value = "Edit";

    deleteBook(bookId);
}