"use client";
import { jsx } from "react/jsx-runtime";
import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from "react";
import { isElementReference } from "../../../state/react-page";
import { ElementRegistration } from "./ElementRegistration";
import { ElementReference } from "./ElementReference";
import { ElementData } from "./ElementData";
import { ElementImperativeHandle } from "../element-imperative-handle";
import { FindDomNode } from "../find-dom-node";
import { FallbackComponent } from "../../../components/shared/FallbackComponent";
import { ErrorBoundary } from "../../../components/shared/ErrorBoundary";
const Element = memo(
  forwardRef(function Element2({ element }, ref) {
    const useFindDomNodeRef = useRef(true);
    const imperativeHandleRef = useRef(new ElementImperativeHandle());
    const findDomNodeCallbackRef = useCallback((current) => {
      if (useFindDomNodeRef.current === true) {
        imperativeHandleRef.current.callback(() => current?.() ?? null);
      }
    }, []);
    const elementCallbackRef = useCallback((current) => {
      useFindDomNodeRef.current = false;
      imperativeHandleRef.current.callback(() => current);
    }, []);
    useImperativeHandle(ref, () => imperativeHandleRef.current, []);
    return /* @__PURE__ */ jsx(ElementRegistration, { componentHandle: imperativeHandleRef.current, elementKey: element.key, children: /* @__PURE__ */ jsx(FindDomNode, { ref: findDomNodeCallbackRef, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: isElementReference(element) ? /* @__PURE__ */ jsx(
      ElementReference,
      {
        ref: elementCallbackRef,
        elementReference: element
      },
      element.key
    ) : /* @__PURE__ */ jsx(ElementData, { ref: elementCallbackRef, elementData: element }, element.key) }) }) });
  })
);
function ErrorFallback() {
  return /* @__PURE__ */ jsx(FallbackComponent, { text: `Error rendering component` });
}
export {
  Element
};
//# sourceMappingURL=Element.js.map