import { MouseEvent, RefObject, useCallback, useEffect } from 'react';

export const useOnClickOutside = (
	ref: RefObject<HTMLElement>,
	handler: (e: MouseEvent<HTMLElement>) => void,
	enabled = true
) => {
	const listener = useCallback(
		event => {
			event.preventDefault();
			event.stopPropagation();
			if (!enabled) return;
			const shouldDoNothing =
				!ref.current || ref.current.contains(event.target);
			// Do nothing if clicking ref's element or descendent elements
			if (shouldDoNothing) {
				return;
			}

			handler(event);
		},
		[enabled, handler, ref]
	);
	useEffect(() => {
		document.addEventListener('mousedown', listener);
		document.addEventListener('touchstart', listener);

		return () => {
			document.removeEventListener('mousedown', listener);
			document.removeEventListener('touchstart', listener);
		};
	}, [listener, ref]);
};

export default useOnClickOutside;