import { Controller } from "@hotwired/stimulus"

// Controller for handling the header navigation
// Manages mobile menu toggle and user dropdown menu
export default class extends Controller {
  static targets = ["mobileMenu", "mobileMenuButton", "userMenu", "userMenuButton"]

  connect() {
    // Initialize menu states
    this.mobileMenuOpen = false
    this.userMenuOpen = false

    // Add click outside listener for user menu
    this.clickOutsideHandler = this.handleClickOutside.bind(this)
    document.addEventListener("click", this.clickOutsideHandler)
  }

  disconnect() {
    // Clean up event listener
    document.removeEventListener("click", this.clickOutsideHandler)
  }

  // Toggle mobile menu visibility
  toggleMobileMenu() {
    this.mobileMenuOpen = !this.mobileMenuOpen
    this.mobileMenuTarget.classList.toggle("hidden", !this.mobileMenuOpen)

    // Update button icon based on state
    const iconOpen = this.mobileMenuButtonTarget.querySelector('[data-menu-icon="open"]')
    const iconClose = this.mobileMenuButtonTarget.querySelector('[data-menu-icon="close"]')

    if (iconOpen && iconClose) {
      iconOpen.classList.toggle("hidden", this.mobileMenuOpen)
      iconClose.classList.toggle("hidden", !this.mobileMenuOpen)
    }
  }

  // Toggle user dropdown menu visibility
  toggleUserMenu() {
    this.userMenuOpen = !this.userMenuOpen
    if (this.hasUserMenuTarget) {
      this.userMenuTarget.classList.toggle("hidden", !this.userMenuOpen)
    }
  }

  // Close menus when clicking outside
  handleClickOutside(event) {
    // Close user menu if clicked outside
    if (this.userMenuOpen && this.hasUserMenuTarget &&
      !this.userMenuTarget.contains(event.target) &&
      !this.userMenuButtonTarget.contains(event.target)) {
      this.userMenuOpen = false
      this.userMenuTarget.classList.add("hidden")
    }

    // Close mobile menu if clicked outside
    if (this.mobileMenuOpen &&
      !this.mobileMenuTarget.contains(event.target) &&
      !this.mobileMenuButtonTarget.contains(event.target)) {
      this.mobileMenuOpen = false
      this.mobileMenuTarget.classList.add("hidden")

      // Update button icon
      const iconOpen = this.mobileMenuButtonTarget.querySelector('[data-menu-icon="open"]')
      const iconClose = this.mobileMenuButtonTarget.querySelector('[data-menu-icon="close"]')

      if (iconOpen && iconClose) {
        iconOpen.classList.remove("hidden")
        iconClose.classList.add("hidden")
      }
    }
  }
}