import { useEffect, useState } from 'react';
import { useCallbackRef } from './use-callback-ref';

export function useDragging(
  onMouseMove: (e: MouseEvent) => void,
): [dragging: boolean, setDragging: (dragging: boolean) => void] {
  const [dragging, setDragging] = useState(false);
  const onMoveRef = useCallbackRef(onMouseMove);
  useEffect(() => {
    if (!dragging) return;

    const handleMouseMove = (e: MouseEvent) => onMoveRef.current?.(e);
    const handleMouseUp = () => setDragging(false);

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [dragging, onMoveRef]);

  return [dragging, setDragging];
}