const library = [];
const bookGrid = document.querySelector("div#books");


function Book(title, author, pages, read) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.read = read;
}

function addBookToLibrary(title, author, pages, read) {
  let bookObject = new Book(title, author, pages, read);
  library.push(bookObject);
  displayBooks();
}


function removeBookFromLibrary(dataId) {
  library.splice(dataId, 1);
  displayBooks();
}

let books = [
  ["The Hobbit", "J.R.R. Tolkien", 295, false],
  ["Jessica's Guide to Dating on the Dark Side", "Natalie M. Pete-Clarkson Jr.", 295, false],
  
]

if (books.length) {
  books.forEach(book => {
    addBookToLibrary(book[0], book[1], book[2], book[3]);
  })
} else {
  displayBooks();
}


function displayBooks() {
  bookGrid.querySelectorAll("& > *").forEach(book => {
    book.remove();
  })
  let dataId = 0;
  if (library.length) {
    library.forEach(book => {
      let bookDiv = document.createElement("div");
      bookDiv.classList.add("book");
      bookDiv.setAttribute("data-id", dataId)

      let bookDetails = document.createElement("div");
      bookDetails.classList.add("book-details");

      let allDetails = {
        "title": `${book.title}`,
        "author": `${book.author}`,
        "pages": `${book.pages}`,
        "status": `${book.read ? "read" : "not read yet"}`,
      };

      for (detail in allDetails) {
        let detailNameContain = document.createElement("div");
        detailNameContain.classList.add("detail-name");

        let detailName = document.createElement("span");
        detailName.textContent = `${detail}: `;
        detailNameContain.append(detailName);

        let detailContent = document.createElement("span");
        detailContent.textContent = allDetails[detail];
        detailContent.classList.add("detail-content");

        bookDetails.append(detailNameContain, detailContent);
      };

      bookDiv.append(bookDetails);

      let bookActions = document.createElement("div");
      bookActions.classList.add("book-actions");
      
      let toggleRead = document.createElement("i");
      toggleRead.classList.add("fa-solid", "fa-book");
      toggleRead.addEventListener("click", function() {
        library[this.parentNode.parentNode.getAttribute("data-id")].read = !library[this.parentNode.parentNode.getAttribute("data-id")].read;
        displayBooks();
      });
      bookActions.append(toggleRead);

      // let edit = document.createElement("i");
      // edit.classList.add("fa-solid", "fa-edit");
      // edit.addEventListener("click", function() {
      //   removeBookFromLibrary(this.parentNode.parentNode.getAttribute("data-id"));
      // });
      // bookActions.append(edit);

      let removeBtn = document.createElement("i");
      removeBtn.classList.add("fa-solid", "fa-trash");
      removeBtn.addEventListener("click", function() {
        removeBookFromLibrary(this.parentNode.parentNode.getAttribute("data-id"));
      });
      bookActions.append(removeBtn);

      bookDiv.append(bookActions);

      bookGrid.append(bookDiv);

      dataId++;
    })
  } else {
    let info = document.createElement("span");
    info.classList.add("no-books");
    info.textContent = "No books to list. Add some!";
    bookGrid.append(info);
  }
}

const newBookBtn = document.querySelector("button#new-book");
const newBookDialog = document.querySelector("dialog");
newBookBtn.addEventListener("click", () => {
  newBookDialog.showModal();
})

newBookDialog.querySelector("form").addEventListener("submit", (event) => {
  let formData = new FormData(document.querySelector("form"));
  let bookVals = []
  for (let [key, value] of formData.entries()) { 
    bookVals.push(value);    
  }
  addBookToLibrary(bookVals[0], bookVals[1], bookVals[2], bookVals[3]);
});

newBookDialog.addEventListener("close", (event) => {
  newBookDialog.querySelectorAll("input").forEach(input => {
    input.value = null;
  })
  newBookDialog.querySelector("input[type='radio']").checked = true;
});