import { useEffect, useRef } from 'react'

type TUseOutsideClickEffect = {
  onClick: Function,
}

export const useOutsideClickEffect = ({
  onClick,
}: TUseOutsideClickEffect) => {
  const wrapperRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const handleOutsideClick = ({ target }: MouseEvent) => {
      const targetNode = target instanceof Node
        ? target
        : null

      /** деструктуризация wrapperRef не сработает, ссылка на реф теряется */
      if (!wrapperRef.current?.contains(targetNode)) {
        onClick()
      }
    }

    window.addEventListener('click', handleOutsideClick)

    return () => {
      window.removeEventListener('click', handleOutsideClick)
    }
  }, [onClick, wrapperRef])
  return wrapperRef
}