"use client";

import BookForm from "@/components/bookform";
import { useEffect, useRef, useState } from "react";
import { useFormState } from "react-dom";
import { createBook, getBooks, deleteBook } from "@/actions/books";

// Her starter vores kode til vores hjemmeside.
export default function Books() {
  const [books, setBooks] = useState([]); // Her opretter vi en 'state' til vores bøger. 'State' er bare et sted, hvor vi kan gemme oplysninger om vores hjemmeside, som kan ændre sig.
  const [currentBook, setCurrentBook] = useState(null); // Her opretter vi en 'state' til den aktuelle bog, som vi vil redigere.
  const [formState, formAction] = useFormState(createBook); // Her opretter vi en 'state' til vores formular, som vi bruger til at oprette eller redigere bøger.
  const dialogRef = useRef(null); // Her opretter vi en reference til vores dialogboks, som vi bruger til at redigere bøger.

  // Denne funktion kaldes, når vi vil redigere en bog.
  async function editHandler(event) {
    const bookId = event.target.dataset.id; // Vi finder id'et af den bog, vi vil redigere.
    const bookToEdit = books.find((book) => book._id === bookId); // Vi finder den aktuelle bog i vores liste.
    if (bookToEdit) {
      setCurrentBook(bookToEdit); // Vi sætter den aktuelle bog til den bog, vi vil redigere.
    }
    dialogRef.current.showModal(); // Vi viser dialogboksen, hvor vi kan redigere bogen.
  }

  // Denne funktion kaldes, når vi vil slette en bog.
  async function deleteHandler(event) {
    console.log(event.target.dataset.id); // Vi udskriver id'et af den bog, vi vil slette.
    if (confirm("Er du sikker på, at du vil slette denne bog?")) {
      // Vi spørger brugeren, om de er sikre på, at de vil slette bogen.
      await deleteBook(event.target.dataset.id); // Vi sletter bogen fra vores database.
      setBooks(await getBooks()); // Vi opdaterer listen over bøger.
    }
  }

  // Denne funktion kaldes, når vores side indlæses, eller når vi opdaterer formularstaten.
  useEffect(() => {
    getBooks().then(setBooks); // Vi henter bøgerne fra vores database og sætter dem i vores 'state'.
  }, [formState]);

  // Her starter vores hjemmesides layout.
  return (
    <>
      <h1 className="text-3xl">Books</h1>
      <BookForm formAction={formAction} formState={formState} />
      <ul>
        {books.map((book) => (
          <li key={book._id}>
            {book.title} by {book.author}
            <button
              data-id={book._id}
              onClick={editHandler}
              className="bg-blue-500 text-white font-semibold uppercase px-4 py-2 rounded-full">
              Edit
            </button>
            <button
              data-id={book._id}
              onClick={deleteHandler}
              className="bg-red-500 text-white font-semibold uppercase px-4 py-2 rounded-full">
              Delete
            </button>
          </li>
        ))}
      </ul>
      <dialog
        ref={dialogRef}
        className="h-[12rem] w-[20rem] py-4 px-6 rounded-md backdrop:bg-white/55 backdrop:backdrop-blur-md">
        <h3>Hej</h3>
        {currentBook && (
          <BookForm
            data={{ title: currentBook.title, author: currentBook.author }}
          />
        )}
        <button onClick={() => dialogRef.current.close()}>Cancel</button>
      </dialog>
    </>
  );
}


i want to use my edit button to edit the title and author can you help me with modiefy my code