import { Controller } from "@hotwired/stimulus"

// Controller for handling animations of featured event cards
// Uses intersection observer to trigger animations when cards come into view
export default class extends Controller {
  // Define targets for the controller
  static targets = ["card"]
  
  // Define CSS classes that can be used with this controller
  static classes = ["visible"]
  
  // Define configurable values with defaults
  static values = {
    threshold: { type: Number, default: 0.1 },           // Percentage of element visibility needed to trigger animation
    rootMargin: { type: String, default: '0px 0px -50px 0px' }, // Margin around root element for intersection detection
    staggerDelay: { type: Number, default: 0.2 }         // Delay between card animations in seconds
  }

  // Initialize the controller when it connects to the DOM
  connect() {
    console.log("FeaturedEventController connected")
    this.setupIntersectionObserver()
    this.setupStaggeredAnimations()
  }

  // Clean up observers when the controller disconnects
  disconnect() {
    if (this.observer) {
      this.observer.disconnect()
    }
  }

  // Set up intersection observer to detect when cards come into view
  setupIntersectionObserver() {
    // Configure observer options
    const observerOptions = {
      threshold: this.thresholdValue,
      rootMargin: this.rootMarginValue
    }

    // Create intersection observer
    this.observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       // Add visible class when card comes into view
       if (entry.isIntersecting) {
         entry.target.classList.add('visible')
       }
     })
   }, observerOptions)

    // Observe all card elements within this controller's scope
   const elements = this.cardTargets
   console.log("Card targets:", elements)
   elements.forEach(el => {
     this.observer.observe(el)
   })
  }

  // Set up staggered animations for cards with progressive delays
  setupStaggeredAnimations() {
   console.log("Setting up staggered animations")
   console.log("Card targets:", this.cardTargets)
   // Add staggered animation delays to cards
   this.cardTargets.forEach((card, index) => {
     card.style.transitionDelay = `${index * this.staggerDelayValue}s`
     card.classList.remove('visible')
   })
 }
}


/** Old code
 <script>
  // Add animation classes when elements are in view
  document.addEventListener("DOMContentLoaded", function() {
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, observerOptions);

    // Observe animated elements
    document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
      observer.observe(el);
    });

    // Add staggered animation delays
    document.querySelectorAll('.featured-event-card').forEach((card, index) => {
      card.style.transitionDelay = `${index * 0.2}s`;
    });
  });
</script>
 */