// This file is auto-generated by "@aria-ui/cli". Do not edit this file directly.

import { registerInlinePopoverRootElement, type InlinePopoverRootElement, type InlinePopoverRootProps as InlinePopoverRootElementProps, type InlinePopoverRootEvents } from '@prosekit/web/inline-popover';
import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';

import { useEditorContext } from '../../contexts/editor-context.ts';

/** Props for the {@link InlinePopoverRoot} React component. */
export interface InlinePopoverRootProps {
  /**
   * The ProseKit editor instance.
   *
   * @default null
   * @hidden
   */
  editor?: InlinePopoverRootElementProps['editor'];
  /**
   * Whether the popover is open by default when some inline content is
   * selected.
   *
   * @default true
   */
  defaultOpen?: InlinePopoverRootElementProps['defaultOpen'];
  /**
   * Whether the inline popover should be dismissed when the editor receives an
   * Escape key press.
   *
   * @default true
   */
  dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];
  /**
   * The reference to position the popover against. This can be a DOM element, a
   * Floating UI virtual element, or a function that returns either of them.
   *
   * When set, the popover is anchored to this reference instead of the current
   * text selection, and the text selection no longer drives the open state, so
   * control it with the `open` property.
   *
   * @default null
   */
  anchor?: InlinePopoverRootElementProps['anchor'];
  /**
   * Whether the overlay is currently open.
   * @default null
   */
  open?: InlinePopoverRootElementProps['open'];
  /**
   * Whether the component should ignore user interaction.
   * @default false
   */
  disabled?: InlinePopoverRootElementProps['disabled'];
  /** Emitted when the open state of the popover changes. */
  onOpenChange?: (event: InlinePopoverRootEvents['openChange']) => void;
}

function InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef: ForwardedRef<InlinePopoverRootElement>) {
  registerInlinePopoverRootElement();

  const elementRef = useRef<InlinePopoverRootElement>(null);
  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);

  const p4Fallback = useEditorContext();

  const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;

  useLayoutEffect(() => {
    const element = elementRef.current as Record<string, unknown> | null;
    if (!element) return;
    Object.assign(element, { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4 ?? p4Fallback, open: p5 });
    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
  });

  useLayoutEffect(() => {
    const element = elementRef.current;
    if (!element) return;
    const ac = new AbortController();
    for (const [index, eventName] of ['openChange'].entries()) {
      element.addEventListener(
        eventName,
        (event: Event) => {
          handlersRef.current[index]?.(event);
        },
        { signal: ac.signal },
      );
    }
    return () => ac.abort();
  }, []);

  const mergedRef = useCallback(
    (element: InlinePopoverRootElement | null) => {
      elementRef.current = element;
      if (typeof forwardedRef === 'function') {
        forwardedRef(element);
      } else if (forwardedRef) {
        forwardedRef.current = element;
      }
    },
    [forwardedRef],
  );

  return createElement('prosekit-inline-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
}

/** A React component that renders an `prosekit-inline-popover-root` custom element. */
export const InlinePopoverRoot: ForwardRefExoticComponent<InlinePopoverRootProps & HTMLAttributes<InlinePopoverRootElement> & RefAttributes<InlinePopoverRootElement>> = /* @__PURE__ */ forwardRef(InlinePopoverRootComponent);