import { Controller } from 'stimulus'

/*
 * Al navegar por el sitio y llegar a ciertas secciones, se van
 * activando ítems del menú.
 *
 * Para eso configuramos un IntersectionObserver en todo el documento y
 * a medida que van apareciendo secciones actualizamos el menú.
 */
export default class extends Controller {
  static targets = [ 'section' ]

  connect () {
    for (const section of this.sectionTargets) {
      this.observer.observe(section)
    }
  }

  /*
   * Solo nos interesa la primera
   */
  get observer () {
    if (!this._observer) this._observer = new IntersectionObserver((entries, observer) => this.update(entries), this.options)

    return this._observer
  }

  get options () {
    if (!this._options) this._options = { threshold: 0, rootMargin: '0px' }

    return this._options
  }

  update (entries) {
    const section = entries.find(x => x.isIntersecting)

    if (!section) return

    window.dispatchEvent(new CustomEvent('scroll:section', { detail: { id: section.target.id }}))
  }
}