import type { Ref } from 'vue'

/**
 * 使用瀏覽器上一頁按鈕關閉 Modal
 * @param isOpenRef 控制 Modal 開啟狀態的 ref
 */
export const useModalBack = (isOpenRef: Ref<boolean>) => {
  const isNavigatingBack = ref(false)

  const onPopState = () => {
    if (isOpenRef.value) {
      isNavigatingBack.value = true
      isOpenRef.value = false
    }
  }

  watch(isOpenRef, (val) => {
    if (val) {
      history.pushState(null, '', location.href)
      window.addEventListener('popstate', onPopState)
    } else {
      if (isNavigatingBack.value) {
        isNavigatingBack.value = false
      } else {
        history.back()
      }
      window.removeEventListener('popstate', onPopState)
    }
  })

  onUnmounted(() => {
    window.removeEventListener('popstate', onPopState)
  })
}