import { RefObject, useLayoutEffect } from 'react'

export function useReportWidth(
  ref: RefObject<HTMLDivElement | null>,
  onReportWidth: (width: number) => void
) {
  function reportWidth() {
    const elm = ref.current
    if (elm == null) return
    // getBoundingClientRect 会导致回流，有需要可以优化成按条件上报
    const width = elm.getBoundingClientRect().width
    return onReportWidth(width)
  }

  useLayoutEffect(() => {
    reportWidth()
  })
}

export function useScrollBar(ref: RefObject<HTMLDivElement>, onReceiveWidth: (width: number) => void) {
  useLayoutEffect(() => {
    const scrollBarWidth = ref.current == null ? 0 : ref.current.offsetWidth - ref.current.clientWidth
    onReceiveWidth(scrollBarWidth)
  })
}