import { ref, onUnmounted } from 'vue'

const DEFAULT_HIDE_AFTER_MS = 900

/** 滚动条默认隐藏，发生滚动后短暂显示，停止滚动一段时间后自动隐藏 */
export function useFlashScrollbar(hideAfterMs = DEFAULT_HIDE_AFTER_MS) {
  const scrollbarVisible = ref(false)
  let hideTimer: ReturnType<typeof setTimeout> | null = null

  function clearHideTimer() {
    if (hideTimer != null) {
      clearTimeout(hideTimer)
      hideTimer = null
    }
  }

  function onScrollableScroll() {
    scrollbarVisible.value = true
    clearHideTimer()
    hideTimer = setTimeout(() => {
      scrollbarVisible.value = false
      hideTimer = null
    }, hideAfterMs)
  }

  onUnmounted(() => {
    clearHideTimer()
  })

  return { scrollbarVisible, onScrollableScroll }
}