import {useEffect,useCallback} from 'react'
import {getTargetElement,BasicTarget} from '../src/utils/dom'

const defaultEvent='click'

type EventType=MouseEvent|TouchEvent

export default function useClickAway(
    onClickAway:(event:EventType)=>void,
    target:BasicTarget,
    eventName:string=defaultEvent,
){
    const handler=useCallback((event)=>{
        const targetElement=getTargetElement(target)as HTMLElement
        
        console.log(targetElement)
        if(!targetElement||targetElement.contains(event.target)){
            return;
        }
        console.log('没有点击他')
        onClickAway(event)
    },[onClickAway,typeof target==='function'?undefined:target])

    useEffect(()=>{
        document.addEventListener(eventName,handler)
        return ()=>{
            document.removeEventListener(eventName,handler)
        }
    },[eventName,handler])
}

 // useClickAway
    const spanRef =useRef() as React.MutableRefObject<HTMLSpanElement>
    const [isShow,setIsShow]=useState(true)
    // useClickAway(()=>{
    //     console.log('点击了外面')
    //     setIsShow(false)
    // },spanRef)

    // 支持传入函数
    useClickAway(()=>{
        console.log('点击了外面')
        setIsShow(false)
    },()=>document.getElementById('test'))
    // },()=>{document.getElementById('test')})
    // 这里加上{}就会变成另一种类型，报错