import { useEffect, type RefObject } from 'react'

// Shared by popover-style UI (RegexHelpIcon, LogPreview's ColumnPicker) that closes itself when a
// mousedown lands outside its container ref, while `active`.
export function useClickOutside(ref: RefObject<HTMLElement | null>, onOutside: () => void, active: boolean) {
  useEffect(() => {
    if (!active) return
    function onClickOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) onOutside()
    }
    document.addEventListener('mousedown', onClickOutside)
    return () => document.removeEventListener('mousedown', onClickOutside)
  }, [active, ref, onOutside])
}