import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = [ 'item' ]

  connect () {
    window.addEventListener('scroll:section', event => this.update(event.detail.id))
  }

  get items () {
    if (!this._items) {
      this._items = {}

      for (const item of this.itemTargets) {
        this._items[item.href.split('#')[1]] = item
      }
    }

    return this._items
  }

  update (id) {
    for (const item of Object.values(this.items)) {
      item.classList.remove('active')
    }

    if (this.items[id]) this.items[id].classList.add('active')
  }
}