const search_bar_div_container = document.querySelector("#search_bar");
const input_bar = document.createElement("input");

input_bar.classList.add(
  "w-full",
  "text-secondary",
  "bg-primary",
  "box-border",
  "border",
  "border-transparent",
  "shadow-xs",
  "hover:bg-ternary",
  "font-medium",
  "leading-5",
  "rounded-full",
  "text-sm",
  "px-8",
  "py-2.5",
  "w-2/3",
  "focus:outline-2",
  "focus:outline-offset-2",
  "focus:outline-ternary",
  "focus:bg-ternary",
);

input_bar.type = "text";
input_bar.placeholder = "Rechercher un livre...";
input_bar.name = "search_book";

search_bar_div_container.classList.add("w-60/100");

search_bar_div_container.appendChild(input_bar);

input_bar.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    search_book();
  }
});

async function search_book() {
  const title = input_bar.value;
  const research = [];

  const response = await fetch(
    `/api/search/book?title=${encodeURIComponent(title)}`,
  );
  const data = await response.json();

  for (let i = 0; i < 8; i++) {
    research.push({
      title: data.items[i].volumeInfo?.title,
      authors: data.items[i].volumeInfo?.authors,
      description: data.items[i].volumeInfo?.description,
      cover: data.items[i].volumeInfo.imageLinks?.thumbnail ?? null,
      isbn:
        data.items[i].volumeInfo?.industryIdentifiers?.[0].identifier ?? null,
    });
  }

  await fetch("/api/set-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(research),
  });

  window.location.href = "/recherche";
}