import { useCallback, useEffect, useRef, useState } from 'react'

/**
 * Easy way to debounce the handling of a rapidly changing value, e.g. a changing slider input
 * @param value value that is rapidly changing
 * @param onChange change handler that should receive the debounced updates to the value
 * @param debouncedMs how long we should wait for changes to be applied
 */
export default function useDebouncedChangeHandler<T>(
  value: T,
  onChange: (newValue: T) => void,
  debouncedMs = 100
): [T, (value: T) => void] {
  const [inner, setInner] = useState<T>(() => value)
  const timer = useRef<ReturnType<typeof setTimeout>>()

  const onChangeInner = useCallback(
    (newValue: T) => {
      setInner(newValue)
      if (timer.current) {
        clearTimeout(timer.current)
      }
      timer.current = setTimeout(() => {
        onChange(newValue)
        timer.current = undefined
      }, debouncedMs)
    },
    [debouncedMs, onChange]
  )

  useEffect(() => {
    if (timer.current) {
      clearTimeout(timer.current)
      timer.current = undefined
    }
    setInner(value)
  }, [value])

  return [inner, onChangeInner]
}