import { useCallback, useEffect, useRef } from 'preact/hooks'

export const useEvent = <E extends Event>(
	target: EventTarget,
	event: string,
	callback: (e: E) => void,
	cancelBubble = false
) => {
	// Hold reference to callback
	const callbackRef = useRef(callback)
	callbackRef.current = callback

	// Since we use ref, .current will always be correct callback
	const listener = useCallback((e: Event) => {
		if (callbackRef.current) {
			callbackRef.current(e as E)
		}
	}, [])

	useEffect(() => {
		// Add our listener on mount
		target.addEventListener(event, listener, cancelBubble)

		// Remove it on dismount
		return () => target.removeEventListener(event, listener)
	}, [target, event, cancelBubble, listener])
}