export const useTheme = () => {
  // 首先創(chuàng)建媒體查詢對(duì)象
  const themeMedia = matchMedia("(prefers-color-scheme: light)")
  // 根據(jù)查詢結(jié)果設(shè)置對(duì)應(yīng)的值
  const theme = ref(themeMedia.matches ? 'light' : 'dark')
  const onChange = (e: MediaQueryListEvent) => theme.value = e.matches ? 'light' : 'dark'
  watchEffect((onCleanup) => {
    //  然后建立監(jiān)聽(tīng)事件
    themeMedia.addEventListener('change', onChange)
    // 并且在退出時(shí)取消監(jiān)聽(tīng)
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })
  return theme;
}

const theme = useTheme()
watchEffect(() => console.log(theme.value, 'theme'))

export const useMatchMedia = (query: string) => {
  const themeMedia = matchMedia(query)
  const match = ref(themeMedia.matches)
  const onChange = (e: MediaQueryListEvent) => match.value = e.matches
  watchEffect((onCleanup) => {
    themeMedia.addEventListener('change', onChange)
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })
  return match
}

export const useTheme = () => {
  const theme = useMatchMedia("(prefers-color-scheme: light)")
  const theme = ref(themeMedia.matches ? 'light' : 'dark')
  return theme  ? 'light' : 'dark'
}

export const useEventListener = <K extends keyof WindowEventMap>(
  target: K,
  listener: (ev: WindowEventMap[K]) => any
) => {
  watchEffect((onCleanup) => {
    addEventListener(target, listener)
    onCleanup(() => removeEventListener(target, listener))
  })
}

export const useNetWork = () => {
  const isOnLine = ref(navigator.onLine)
  const setOnLine = () => isOnLine.value = true
  const setOffLine = () => isOnLine.value = false
  useEventListener('online', setOnLine)
  useEventListener('offline', setOffLine)
  return isOnLine
}

const isOnLine = useNetWork()
watchEffect(() => console.log(isOnLine.value, 'isOnLine'))
<h1 v-if="isOnLine">onLine</h1>
<h1 v-else>offLine</h1>

useEventListener('scroll', () => console.log('scroll'))

export const debounce = (
  fn: (...args: any[]) => void,
  delay: number
) => {
  let timer: NodeJS.Timeout
  return  (...args: any[]) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

useEventListener('scroll', debounce(() => console.log('scroll'), 200))