import React, { useRef, useEffect } from 'react'

import raf from '../utils/raf'
import Tooltip, { TooltipElement, TooltipProps } from '../Tooltip'

export default function SliderTooltip(props: TooltipProps) {
  const { visible } = props

  const tooltipRef = useRef<TooltipElement>(null)

  useEffect(() => {
    let rafId: number | null = null

    function keepAlign() {
      // 使用 window.requestAnimationFrame(callback)，在浏览器重绘前调用 tooltip 的强制对齐方法
      rafId = raf(() => {
        tooltipRef.current?.forceAlign()
        rafId = null
        keepAlign()
      })
    }

    function cancelKeepAlign() {
      if (rafId != null) {
        raf.cancel(rafId)
      }
    }

    if (visible) {
      keepAlign()
    }
    return cancelKeepAlign
  }, [visible])

  return (
    <Tooltip ref={tooltipRef} {...props} />
  )
}