import * as React from "react"
import { useEventListener } from "./use-event-listener"

/**
 * Hook to detect clicks outside of a specified element.
 *
 * @param ref The React ref to the element.
 * @param callback The handler to call when a click outside the element is detected.
 */
export function useOnClickOutside(
	ref: React.RefObject<HTMLElement | null>,
	callback?: (event: MouseEvent | TouchEvent) => void,
	options: AddEventListenerOptions = {}
) {
	const listener = React.useCallback(
		(event: MouseEvent | TouchEvent) => {
			// Do nothing if clicking ref's element or descendent elements
			if (!ref.current || ref.current.contains(event.target as Node)) {
				return
			}
			callback?.(event)
		},
		[ref, callback]
	)

	useEventListener("mousedown", listener, window, options)
	useEventListener("touchstart", listener, window, options)
}