import { Controller } from "@hotwired/stimulus"
import { useClickOutside } from 'stimulus-use'

// Connects to data-controller="modals"
export default class extends Controller {
  connect() {
    // useClickOutside(this)
    this.boundHandleKeydown = this.handleKeydown.bind(this)
    document.addEventListener("keydown", this.boundHandleKeydown)
    window.addEventListener('modals:close', this.close.bind(this))

    const panelElement = document.getElementById("modals-panel")
    const backdropElement = document.getElementById("modals-backdrop")

    if (panelElement && backdropElement) {
      setTimeout(() => {
        panelElement.classList.remove('opacity-0', 'translate-y-4', 'sm:scale-95')
        panelElement.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
        backdropElement.classList.remove('opacity-0')
        backdropElement.classList.add('opacity-75')
      }, 10)  // 애니메이션이 바로 시작되도록 약간의 지연 추가
    }
  }

  disconnect() {
    document.removeEventListener('keydown', this.boundHandleKeydown)
  }

  handleKeydown(event) {
    if (event.key === "Escape") {
      this.close()
    }
  }

  close(event) {
    const panelElement = document.getElementById("modals-panel")
    const backdropElement = document.getElementById("modals-backdrop")

    if (panelElement && backdropElement) {
      panelElement.classList.remove("opacity-100", "translate-y-0", "sm:scale-100")
      panelElement.classList.add("opacity-0", "translate-y-4", "sm:scale-95")

      backdropElement.classList.remove("opacity-75")
      backdropElement.classList.add("opacity-0")

      setTimeout(() => {
        const modalsFrame = document.querySelector("turbo-frame#modals")
        if (modalsFrame) {
          modalsFrame.innerHTML = ""
          window.location.reload()
        }
      }, 300) // 닫힘 애니메이션 시간과 동일하게 300ms 지연 후 모달 제거
    }
  }
}