import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["tbody"]

  connect() {
    this.#group()
    this._observer = new MutationObserver(() => this.#group())
    this._observer.observe(this.tbodyTarget, {
      childList: true, subtree: true,
      attributes: true, attributeFilter: ['style']
    })
  }

  disconnect() {
    this._observer?.disconnect()
  }

  #group() {
    let prevTakenAt = null
    Array.from(this.tbodyTarget.querySelectorAll('tr[data-taken-at]'))
      .filter(row => row.style.display !== 'none')
      .forEach(row => {
        const takenAt = row.dataset.takenAt
        row.classList.toggle('grouped', takenAt !== null && takenAt === prevTakenAt)
        prevTakenAt = takenAt
      })
  }
}