import "foliate-js/view.js";
import { Alpine } from "../alpine";

document.addEventListener("alpine:init", () => {
  Alpine.data("readerShell", () => ({
    enablePanelDetection: false,
    libraryType: "",
    formatGroup: "",
    mangaType: "",
    readingDirection: "",
    panelDetector: null,

    initReader(config: any) {
      this.enablePanelDetection = config.enablePanelDetection;
      this.libraryType = config.libraryType;
      this.formatGroup = config.formatGroup;
      this.mangaType = config.mangaType;
      this.readingDirection = config.readingDirection;

      console.log("Reader initialized with:", {
        panelDetection: this.enablePanelDetection,
        library: this.libraryType,
        format: this.formatGroup,
      });

      // Only load panel detection if enabled
      if (this.enablePanelDetection) {
        this.loadPanelDetection();
      }
    },

    async loadPanelDetection() {
      try {
        // Dynamic import to only load when needed
        const { PanelDetector } = await import("foliate-js/panel-detection.js");
        this.panelDetector = new PanelDetector();
        console.log("Panel detection loaded successfully");
      } catch (error) {
        console.error("Failed to load panel detection:", error);
      }
    },

    nextPage() {
      const view = document.querySelector("#reader-view");
      // @ts-ignore - foliate custom element
      view?.next?.();
    },

    previousPage() {
      const view = document.querySelector("#reader-view");
      // @ts-ignore - foliate custom element
      view?.prev?.();
    },
  }));

  Alpine.start();
});