import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input", "preview", "modal"];

  connect() {
    this.html5QrCode = null;
  }

  // Öffnet das Modal und startet den Kamera-Stream
  startCamera(event) {
    event.preventDefault();

    // Modal anzeigen
    this.modalTarget.classList.remove("hidden");

    // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
    this.html5QrCode = new Html5Qrcode(this.previewTarget.id);

    // FPS-Rate und Scan-Rahmen (250x250px) festlegen
    const config = { fps: 10, qrbox: { width: 250, height: 250 } };

    this.html5QrCode
      .start(
        { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
        config,
        (decodedText, decodedResult) => {
          // SUCCESS: Code erkannt!
          this.inputTarget.value = decodedText; // Trägt die ID (z.B. 10024) ins Textfeld ein

          // NEU: Simuliert das Tippen, damit dein search-form Controller die Live-Suche sofort startet!
          this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));

          this.stopCamera(); // Stoppt die Kamera und schließt das Fenster
        },
        (errorMessage) => {
          // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
        },
      )
      .catch((err) => {
        console.error("Kamera-Zugriff verweigert oder blockiert:", err);
      });
  }

  // Schließt das Modal und beendet den Stream sauber
  stopCamera() {
    if (this.html5QrCode && this.html5QrCode.isScanning) {
      this.html5QrCode
        .stop()
        .then(() => {
          this.modalTarget.classList.add("hidden");
        })
        .catch((err) => console.error("Fehler beim Beenden des Streams:", err));
    } else {
      this.modalTarget.classList.add("hidden");
    }
  }
}