// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file layerHost.ts
 * @input Uses the layer's intended inline parent element
 * @output Exports resolveLayerPortalTarget, the corrective portal target
 * @position Layer utility; used by useLayer to place the popover in the DOM
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Layer/layerHost.test.ts
 */

/**
 * Ancestors a layer must not be hosted inside.
 *
 * Two overlapping reasons, both verified in Chrome:
 *
 * 1. The HTML parser owns server markup. `<p>` and the heading-ish elements
 *    take phrasing content only, so a block element inside one makes the
 *    parser close the paragraph and reparent the rest — the layer's content
 *    ends up in the page instead of the popover. A nested `<a>` triggers the
 *    same tearing through the adoption agency algorithm.
 * 2. Interactive ancestors capture the layer's own interactions. A card
 *    hosted inside an `<a>` or `<button>` puts its links and buttons inside
 *    that control: clicking one navigates the wrapping link, and every
 *    focusable in the card joins the control's own tab stop.
 *
 * Inline formatting elements are on the list for a third, milder reason: a
 * layer hosted in one inherits its typography (font-size, text-align), so a
 * card in a 13px centered paragraph renders 13px and centered.
 */
const UNSAFE_HOSTS = new Set([
  // Phrasing-content-only containers
  'p',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'dt',
  'pre',
  'legend',
  'data',
  'dfn',
  'meter',
  'output',
  'progress',
  'option',
  'optgroup',
  // Structural containers whose direct children are restricted. An inert
  // <template> marker is valid script-supporting content in these positions,
  // but the eventual div/span layer is not.
  'table',
  'thead',
  'tbody',
  'tfoot',
  'tr',
  'colgroup',
  'ul',
  'ol',
  'menu',
  'dl',
  'select',
  'datalist',
  'picture',
  'hgroup',
  'ruby',
  'rt',
  'rp',
  // Interactive containers
  'a',
  'button',
  'label',
  'summary',
  // Inline formatting context
  'span',
  'em',
  'strong',
  'b',
  'i',
  'u',
  's',
  'small',
  'mark',
  'code',
  'kbd',
  'samp',
  'var',
  'sub',
  'sup',
  'abbr',
  'cite',
  'q',
  'time',
  'bdi',
  'bdo',
  'ins',
  'del',
]);

/**
 * Return the corrective portal target for a layer's intended inline parent.
 *
 * A null result means the inline parent and all of its ancestors are safe, so
 * the layer should stay at its JSX position. Otherwise the result is the
 * nearest element outside every unsafe ancestor around that position.
 *
 * Walking up from the actual render position (rather than the trigger, or
 * portaling to `document.body`) keeps the two things a layer inherits there:
 *
 * - **Theme.** Theme scopes live on DOM ancestors. Staying as close as
 *   possible to the intended render position preserves their component rules
 *   and custom properties; `document.body` may sit outside a nested scope.
 * - **Tab order.** Sequential focus follows DOM order, so a host near the
 *   trigger keeps the layer's focusables next to it. (`show()` also passes
 *   the trigger as the popover's invoker `source`, which pins focus order to
 *   the invoker in browsers that support it.)
 *
 * The outermost unsafe ancestor matters. A safe div may itself sit inside an
 * anchor; stopping at that div would still put the layer's buttons inside the
 * link. Walking the whole chain ensures the target is outside both.
 */
export function resolveLayerPortalTarget(
  inlineParent: HTMLElement | null,
): HTMLElement | null {
  if (!inlineParent) {
    return null;
  }

  let outermostUnsafe: HTMLElement | null = null;
  let node: HTMLElement | null = inlineParent;
  while (node) {
    if (UNSAFE_HOSTS.has(node.tagName.toLowerCase())) {
      outermostUnsafe = node;
    }
    node = node.parentElement;
  }

  return outermostUnsafe?.parentElement ?? null;
}