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

import { registerResizableRootElement, type ResizableRootElement, type ResizableRootProps as ResizableRootElementProps, type ResizableRootEvents } from '@prosekit/web/resizable';
import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';

/** Props for the {@link ResizableRoot} React component. */
export interface ResizableRootProps {
  /**
   * The width of the resizable element.
   *
   * @default null
   */
  width?: ResizableRootElementProps['width'];
  /**
   * The height of the resizable element.
   *
   * @default null
   */
  height?: ResizableRootElementProps['height'];
  /**
   * The aspect ratio of the resizable element.
   *
   * @default null
   */
  aspectRatio?: ResizableRootElementProps['aspectRatio'];
  /** Emitted when a resize operation starts. */
  onResizeStart?: (event: ResizableRootEvents['resizeStart']) => void;
  /** Emitted when a resize operation ends. */
  onResizeEnd?: (event: ResizableRootEvents['resizeEnd']) => void;
}

function ResizableRootComponent(props: ResizableRootProps, forwardedRef: ForwardedRef<ResizableRootElement>) {
  registerResizableRootElement();

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

  const { aspectRatio: p0, height: p1, width: p2, onResizeEnd: e0, onResizeStart: e1, ...restProps } = props;

  useLayoutEffect(() => {
    const element = elementRef.current as Record<string, unknown> | null;
    if (!element) return;
    Object.assign(element, { aspectRatio: p0, height: p1, width: p2 });
    handlersRef.current = [e0, e1] as Array<((event: Event) => void) | undefined>;
  });

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

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

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

/** A React component that renders an `prosekit-resizable-root` custom element. */
export const ResizableRoot: ForwardRefExoticComponent<ResizableRootProps & HTMLAttributes<ResizableRootElement> & RefAttributes<ResizableRootElement>> = /* @__PURE__ */ forwardRef(ResizableRootComponent);