import React, { useRef, useEffect, MouseEvent } from 'react'
import hasParent from './has-parent'

interface ClickOutsideProps {
  active: boolean
  onClick: (e?: MouseEvent) => void
  children: any
}

const ClickOutside = ({ active = true, onClick, children }: ClickOutsideProps) => {
    const innerRef = useRef()

    const handleClick = (event: any) => {
      if (!hasParent(event.target, innerRef?.current)) {
        if (typeof onClick === 'function') {
          onClick(event)
        }
      }
    }

    useEffect(() => {
      if (active) {
        document.addEventListener('mousedown', handleClick)
        document.addEventListener('touchstart', handleClick)
      }

      return () => {
        if (active) {
          document.removeEventListener('mousedown', handleClick)
          document.removeEventListener('touchstart', handleClick)
        }
      }
    })

    return React.cloneElement(children, { ref: innerRef })
  }

export default ClickOutside