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

// Controller for handling flash messages
// Automatically dismisses messages after a timeout and handles manual closing
export default class extends Controller {
  // Define targets for the controller
  static targets = ["message"];

  // Initialize the controller when it connects to the DOM
  connect() {
    // console.log("FlashMessageController mounted", this.element);
    console.log("FlashMessageController mounted");

    // Initialize Lucide icons for this element if available
    if (typeof lucide !== "undefined") {
      lucide.createIcons({ within: this.element });
    }

    // Auto-dismiss after 2 seconds
    this.timeout = setTimeout(() => {
      this.close();
    }, 5000);
  }

  // Clean up the timeout when the controller disconnects
  disconnect() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  }

  // Close the flash message with a fade-out animation
  close() {
    // Add opacity transition classes
    this.element.classList.add(
      "opacity-0",
      "transition-opacity",
      "duration-300",
    );

    // Remove element after transition completes
    setTimeout(() => {
      this.element.remove();
    }, 300);
  }
}