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

export default class extends Controller {
  static targets = ["notification"];

  connect() {
    // Startet den Timer: Ruft nach 5000 Millisekunden (5 Sekunden) die dismiss-Methode auf
    this.timeout = setTimeout(() => {
      this.dismiss();
    }, 5000);
  }

  disconnect() {
    // Wichtig: Löscht den Timer, falls der Nutzer die Nachricht vor Ablauf der 5 Sekunden manuell schließt
    clearTimeout(this.timeout);
  }

  dismiss() {
    // 1. Tailwind-Klassen für das Ausblenden hinzufügen
    // this.notificationTarget.classList.add("opacity-0","translate-y-2","scale-95");

    // Verschiebt das Element auf der X-Achse weit nach rechts (translate-x-full)
    // und blendet es leicht aus, damit es weicher wirkt
    // 1. Alten Startpunkt entfernen (wichtig für Tailwind v4/v3)
    this.notificationTarget.classList.remove("translate-x-0", "opacity-100");
    // 2. Neuen Endpunkt hinzufügen (löst die Animation aus)
    this.notificationTarget.classList.add("translate-x-full", "opacity-20");

    // Fügt Klassen für Deckkraft (0) und minimale Skalierung hinzu
    // 1. Den Startwert (voll sichtbar) entfernen
    //this.notificationTarget.classList.remove("opacity-100");
    // 2. Den Endwert (vollständig transparent) hinzufügen -> startet das Verblassen
    //this.notificationTarget.classList.add("opacity-0", "scale-95");

    // 2. Nach dem Ende der CSS-Animation (300ms) das Element komplett aus dem DOM löschen
    setTimeout(() => {
      this.element.remove();
    }, 300);
  }
}