import { __assign } from "../../../../../../tslib@2.6.2/node_modules/tslib/tslib.es6.js";
import * as React from "react";
import { forwardRef, useContext } from "react";
import { useFeatures } from "./features/use-features.js";
import { MotionConfigContext } from "../context/MotionConfigContext.js";
import { MotionContext } from "../context/MotionContext/index.js";
import { useVisualElement } from "./utils/use-visual-element.js";
import { useMotionRef } from "./utils/use-motion-ref.js";
import { useCreateMotionContext } from "../context/MotionContext/create.js";
import { loadFeatures, featureDefinitions } from "./features/definitions.js";
import { isBrowser } from "../utils/is-browser.js";
import { useProjectionId } from "../projection/node/id.js";
import { LayoutGroupContext } from "../context/LayoutGroupContext.js";
import { useProjection } from "./features/use-projection.js";
import { VisualElementHandler } from "./utils/VisualElementHandler.js";
function createMotionComponent(_a) {
  var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;
  preloadedFeatures && loadFeatures(preloadedFeatures);
  function MotionComponent(props, externalRef) {
    var layoutId = useLayoutId(props);
    props = __assign(__assign({}, props), { layoutId });
    var config = useContext(MotionConfigContext);
    var features = null;
    var context = useCreateMotionContext(props);
    var projectionId = config.isStatic ? void 0 : useProjectionId();
    var visualState = useVisualState(props, config.isStatic);
    if (!config.isStatic && isBrowser) {
      context.visualElement = useVisualElement(Component, visualState, __assign(__assign({}, config), props), createVisualElement);
      useProjection(projectionId, props, context.visualElement, projectionNodeConstructor || featureDefinitions.projectionNodeConstructor);
      features = useFeatures(props, context.visualElement, preloadedFeatures);
    }
    return React.createElement(
      VisualElementHandler,
      { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },
      features,
      React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))
    );
  }
  return forwardRef(MotionComponent);
}
function useLayoutId(_a) {
  var _b;
  var layoutId = _a.layoutId;
  var layoutGroupId = (_b = useContext(LayoutGroupContext)) === null || _b === void 0 ? void 0 : _b.id;
  return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
}
export {
  createMotionComponent
};
//# sourceMappingURL=index.js.map
