/**
 ** This an ES5 version attempt at the code shown in the tutorial.
 ** tutorial uses classes, static methods and the DOM to manupilate
 ** events and UI tasks.
 */

/**
 * TODO: Create a book object
 * ? represents a book
 */

//Book constructor
const book = (title, author, isbn) => {
  this.title = title;
  this.author = author;
  this.isbn = isbn;
};

/**
 * TODO: UI tasks
 * ? handles UI tasks
 */

//array of stored books this method loops through the list
const displayBooks = () => {
  const storedBook = [
    {
      title: "Book One",
      author: "John Doe",
      isbn: "334"
    },
    {
      title: "Book two",
      author: "John Doe",
      isbn: "734"
    }
  ];

  //books variable that holds the list of books
  const books = storedBook;

  //looping through the books array and calling addBookToList on each books
  books.forEach(book => addBookToList(book));
};

//This methods shows all the books from storedbooks on the UI
const addBookToList = book => {
  //grab this the table body element from the dom
  const list = document.querySelector("#book-list");

  //DOM creates a table row
  const row = document.createElement("tr");

  //DOM adds the colums to the row with the book variables
  row.innerHTML = `
    <td>${book.title}</td>
    <td>${book.author}</td>
    <td>${book.isbn}</td>
    <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
    `;
  //DOM adds the row to the table body element
  list.appendChild(row);
};

/**
 * TODO: Storage tasks
 * ? handles storage
 */

/**
 * TODO: Event: Display books
 * ? show book in the list
 */

//displays books in storedBooks by looping and calling the addBookToList on each one
document.addEventListener("DOMcontentLoaded", displayBooks());

/**
 * TODO: Event: Add a book
 * ? adds a book to storage by colecting data from the form and instanciating a book
 */
const addedBook = new book(title, author, isbn);

document.querySelector("#book-form").addEventListener("submit", e => {
  //Prevent actual submit
  e.preventDefault();

  //Get form values
  const title = document.querySelector("#title").value;
  const author = document.querySelector("#author").value;
  const isbn = document.querySelector("#isbn").value;

    //Instantiates a book
    addedBook(title, author, isbn) = {
        title: this.title,
        author: this.author,
        isbn: this.isbn
    };

  console.log(addedBook);
});

/**
 * TODO: Event: Remove a book
 * ? removes a book from the UI(list) and storage
 */