import { Alpine } from "./alpine";
import { showToast } from "./toast";

function showReaderPlaceholder(): void {
  showToast("Ebook reader coming soon!", "info");
}

function showMetadataEditorPlaceholder(): void {
  showToast("Metadata editor coming soon!", "info");
}

function showProgressSyncModal(): void {
  const modal = document.getElementById("progress-sync-modal");
  if (modal) {
    modal.classList.remove("hidden");
  }
}

function showNotesModal(): void {
  const modal = document.getElementById("notes-modal");
  if (modal) {
    modal.classList.remove("hidden");
  }
}

function hideProgressSyncModal(): void {
  const modal = document.getElementById("progress-sync-modal");
  if (modal) {
    modal.classList.add("hidden");
  }
}

function hideNotesModal(): void {
  const modal = document.getElementById("notes-modal");
  if (modal) {
    modal.classList.add("hidden");
  }
}

export {
  showReaderPlaceholder,
  showMetadataEditorPlaceholder,
  showProgressSyncModal,
  showNotesModal,
  hideProgressSyncModal,
  hideNotesModal,
};

Alpine.data("bookDetail", () => ({
  showReaderPlaceholder,
  showMetadataEditorPlaceholder,
  showProgressSyncModal,
  showNotesModal,
  hideProgressSyncModal,
  hideNotesModal,
}));