import { App } from 'vue'
import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
import { $loading } from '@/hooks/useLoading'

// 全局组合式函数
export function onPageShow(fn: () => void | Promise<void>) {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      fn()
    }
  }

  onMounted(() => {
    fn()
    document.addEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onUnmounted(() => {
    document.removeEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onActivated(() => {
    fn()
    document.addEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onDeactivated(() => {
    document.removeEventListener('visibilitychange', handleVisibilityChange, false)
  })
}

export function onPageHide(fn: () => void) {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden') {
      fn()
    }
  }

  onMounted(() => {
    document.addEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onUnmounted(() => {
    fn()
    document.removeEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onActivated(() => {
    document.addEventListener('visibilitychange', handleVisibilityChange, false)
  })

  onDeactivated(() => {
    fn()
    document.removeEventListener('visibilitychange', handleVisibilityChange, false)
  })
}

// 注册全局组合式函数
export function setupGlobalComposables(app: App) {
  // 添加到全局属性中
  app.config.globalProperties.$onPageShow = onPageShow
  app.config.globalProperties.$onPageHide = onPageHide
  app.config.globalProperties.$loading = $loading
}