import { useContext, useRef, useEffect } from "react";
import { PresenceContext } from "../../context/PresenceContext.js";
import { useVisualElementContext } from "../../context/MotionContext/index.js";
import { useIsomorphicLayoutEffect } from "../../utils/use-isomorphic-effect.js";
import { LazyContext } from "../../context/LazyContext.js";
import { useReducedMotionConfig } from "../../utils/use-reduced-motion.js";
function useVisualElement(Component, visualState, props, createVisualElement) {
  var lazyContext = useContext(LazyContext);
  var parent = useVisualElementContext();
  var presenceContext = useContext(PresenceContext);
  var shouldReduceMotion = useReducedMotionConfig();
  var visualElementRef = useRef(void 0);
  if (!createVisualElement)
    createVisualElement = lazyContext.renderer;
  if (!visualElementRef.current && createVisualElement) {
    visualElementRef.current = createVisualElement(Component, {
      visualState,
      parent,
      props,
      presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
      blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
      shouldReduceMotion
    });
  }
  var visualElement = visualElementRef.current;
  useIsomorphicLayoutEffect(function() {
    visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
  });
  useEffect(function() {
    var _a;
    (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
  });
  useIsomorphicLayoutEffect(function() {
    return function() {
      return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount();
    };
  }, []);
  return visualElement;
}
export {
  useVisualElement
};
//# sourceMappingURL=use-visual-element.js.map
