import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["item", "panel"]

  connect() {
    this.setActive(0)
  }

  itemTargetConnected(el) {
    el.addEventListener("mouseenter", () => {
      const index = parseInt(el.dataset.index, 10)
      if (this.activeIndex !== index) {
        this.setActive(index)
      }
    })

    el.addEventListener("click", () => {
      const index = parseInt(el.dataset.index, 10)
      this.setActive(index)
    })
  }

  setActive(index) {
    this.activeIndex = index

    // Set active on list items
    this.itemTargets.forEach((el, i) => {
      el.classList.toggle("nav-item-active", i === index)
    })

    // Show/hide content panels
    this.panelTargets.forEach((el, i) => {
      el.classList.toggle("hidden", i !== index)
    })
  }
}