'use client'

import { useCallback, useState } from 'react'

/**
 * Resolves the nearest open modal dialog so Select/Autocomplete popovers can
 * portal inside it. HeroUI Modal marks everything outside the dialog as inert;
 * a body-level popover is treated as an outside interaction and dismisses the modal.
 */
export function useDialogPortalContainer() {
  const [portalContainer, setPortalContainer] = useState<HTMLElement | undefined>()

  const setHostEl = useCallback((node: HTMLDivElement | null) => {
    const dialog = node?.closest<HTMLElement>('[role="dialog"][aria-modal="true"]')

    setPortalContainer(dialog ?? undefined)
  }, [])

  return { portalContainer, setHostEl }
}