import { Controller } from "@hotwired/stimulus"

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

  connect() {
    this.boundKey = this.onKey.bind(this)
    document.addEventListener("keydown", this.boundKey)
  }

  disconnect() {
    document.removeEventListener("keydown", this.boundKey)
    document.body.classList.remove("overflow-hidden")
  }

  toggle(event) {
    event?.preventDefault()
    event?.stopPropagation()
    this.panelTarget.classList.contains("hidden") ? this.show() : this.hide()
  }

  show() {
    this.panelTarget.classList.remove("hidden")
    document.body.classList.add("overflow-hidden")
  }

  hide() {
    this.panelTarget.classList.add("hidden")
    document.body.classList.remove("overflow-hidden")
  }

  onKey(event) {
    if (event.key === "Escape") this.hide()
  }
}