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

const useClickOutside = (callback: Function) => {
  const ref = useRef<HTMLElement>(null)

  useEffect(() => {
    const handler = (el: TouchEvent | MouseEvent): void => {
      if (
        ref.current &&
        el.target instanceof HTMLElement &&
        !ref.current.contains(el.target)
      ) {
        el.preventDefault()
        el.stopPropagation()
        callback()
      }
    }

    document.addEventListener('click', handler, true)
    document.addEventListener('touchstart', handler, true)

    return () => {
      document.removeEventListener('click', handler, true)
      document.removeEventListener('touchstart', handler, true)
    }
  }, [callback, ref])

  return ref
}

export default useClickOutside