import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.reset = this.reset.bind(this)
    window.addEventListener("modal:closed", this.reset)
  }

  disconnect() {
    window.removeEventListener("modal:closed", this.reset)
  }

  // Slides the copy out and lets the hero flex up to fill the viewport. The
  // negative margin is what frees the space; the transform carries the article
  // the rest of the way off-screen.
  exit() {
    const article = this.element.querySelector(":scope > article")
    if (!article) return

    this.element.style.setProperty("--exit-shift", `${article.offsetHeight}px`)
    this.element.classList.add("is-exiting")

    // Force the transitions into existence now, so a fast turbo_stream response
    // still finds something to wait on before it opens the modal.
    getComputedStyle(article).marginBlockEnd
  }

  reset() {
    this.element.classList.remove("is-exiting")
  }
}