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

import { registerAutocompleteRootElement, type AutocompleteRootElement, type AutocompleteRootProps as AutocompleteRootElementProps, type AutocompleteRootEvents } from '@prosekit/web/autocomplete';
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 AutocompleteRoot} React component. */
export interface AutocompleteRootProps {
  /**
   * The ProseKit editor instance.
   *
   * @default null
   * @hidden
   */
  editor?: AutocompleteRootElementProps['editor'];
  /**
   * The regular expression to match the query text to autocomplete.
   *
   * @default null
   */
  regex?: AutocompleteRootElementProps['regex'];
  /**
   * The filter function to determine if an item should be shown in the
   * listbox.
   *
   * @default defaultItemFilter
   */
  filter?: AutocompleteRootElementProps['filter'];
  /**
   * Builds the query string from the regex match found before the cursor. The
   * query is exposed via the `queryChange` event and used by the built-in item
   * filter. The default builder lowercases the match and strips punctuation.
   * Provide a custom builder to control the query, for example to preserve the
   * casing and punctuation the user typed.
   *
   * @default defaultQueryBuilder
   */
  queryBuilder?: AutocompleteRootElementProps['queryBuilder'];
  /**
   * The reference to position the popup against. This can be a DOM element, a
   * Floating UI virtual element, or a function that returns either of them.
   * By default, the popup will be positioned against the text content that
   * triggers the autocomplete.
   *
   * @default null
   */
  anchor?: AutocompleteRootElementProps['anchor'];
  /**
   * Whether the autocomplete match should follow the text cursor when it
   * moves without editing, growing and shrinking the query as the cursor
   * moves over existing text (for example with arrow keys).
   *
   * @default false
   */
  followCursor?: AutocompleteRootElementProps['followCursor'];
  /** Fired when the open state changes. */
  onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;
  /** Fired when the query changes. */
  onQueryChange?: (event: AutocompleteRootEvents['queryChange']) => void;
  /**
   * Emitted when the selected value changes. Only available when multiple is
   * false.
   */
  onValueChange?: (event: AutocompleteRootEvents['valueChange']) => void;
  /**
   * Emitted when the selected values change. Only available when multiple is
   * true.
   */
  onValuesChange?: (event: AutocompleteRootEvents['valuesChange']) => void;
}

function AutocompleteRootComponent(props: AutocompleteRootProps, forwardedRef: ForwardedRef<AutocompleteRootElement>) {
  registerAutocompleteRootElement();

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

  const p1Fallback = useEditorContext();

  const { anchor: p0, editor: p1, filter: p2, followCursor: p3, queryBuilder: p4, regex: p5, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;

  useLayoutEffect(() => {
    const element = elementRef.current as Record<string, unknown> | null;
    if (!element) return;
    Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, followCursor: p3, queryBuilder: p4, regex: p5 });
    handlersRef.current = [e0, e1, e2, e3] as Array<((event: Event) => void) | undefined>;
  });

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

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

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

/** A React component that renders an `prosekit-autocomplete-root` custom element. */
export const AutocompleteRoot: ForwardRefExoticComponent<AutocompleteRootProps & HTMLAttributes<AutocompleteRootElement> & RefAttributes<AutocompleteRootElement>> = /* @__PURE__ */ forwardRef(AutocompleteRootComponent);