'use strict';

var react = require('motion/react');
var o = require('react');
var useLatestFunction = require('./useLatestFunction.js');
var usePointCompare = require('./usePointCompare.js');

"use strict";
const basicProps = [
  "alpha",
  "angle",
  "rotation",
  "x",
  "y",
  "width",
  "height"
];
const nestedProps = ["scale", "pivot", "position", "skew"];
const supportedProps = [...basicProps, ...nestedProps];
const filterTransition = (transition) => {
  if (transition === void 0) return void 0;
  const withRemovedKeys = Object.fromEntries(
    Object.entries(transition).filter(([key]) => !(key in supportedProps))
  );
  if (Object.keys(withRemovedKeys).length === 0) return void 0;
  return withRemovedKeys;
};
function createMotionComponent(Component) {
  return function MotionComponent({
    initial,
    animate,
    ref: userRef,
    transition,
    ...props
  }) {
    const ref = o.useRef(null);
    o.useImperativeHandle(userRef, () => ref.current);
    const firstRenderRef = o.useRef(true);
    const defaultTransition = o.use(react.MotionConfigContext).transition;
    const getTransitionDetails = useLatestFunction.useLatestFunction(
      (property) => {
        const scopedVague = animate?.transition;
        const scopedSpecific = animate?.transition?.[property];
        const transitionPropertyVague = transition;
        const transitionPropertySpecific = transition?.[property];
        const motionConfigVague = defaultTransition;
        const motionConfigSpecific = defaultTransition?.[property];
        return filterTransition(scopedSpecific) ?? filterTransition(scopedVague) ?? filterTransition(transitionPropertySpecific) ?? filterTransition(transitionPropertyVague) ?? filterTransition(motionConfigSpecific) ?? filterTransition(motionConfigVague);
      }
    );
    const useInstantState = (key) => {
      const instantValue = props[key];
      const initialValue = o.useRef(initial?.[key] ?? instantValue ?? animate?.[key]).current;
      return usePointCompare.usePointCompareMemo(() => {
        if (firstRenderRef.current) return initialValue;
        return instantValue;
      }, instantValue);
    };
    const runningAnimations = o.useRef({});
    const saveAnimation = o.useCallback((key, value) => {
      var _a;
      (_a = runningAnimations.current)[key] ?? (_a[key] = []);
      runningAnimations.current[key].push(value);
    }, []);
    const clear = o.useCallback((key) => {
      runningAnimations.current[key]?.forEach((animation) => animation.stop());
      runningAnimations.current[key] = [];
    }, []);
    const to = o.useCallback(
      (key, value) => {
        if (value === void 0) return;
        if (!ref.current) return;
        const transition2 = getTransitionDetails(key);
        if (typeof value === "object") {
          const nestedValue = ref.current?.[key];
          const { x, y } = value;
          if (!nestedValue) return;
          if (x !== void 0) {
            saveAnimation(key, react.animate(nestedValue, {
              x: [
                nestedValue.x,
                x
              ]
            }, transition2));
          }
          if (y !== void 0) {
            saveAnimation(key, react.animate(nestedValue, {
              y: [
                nestedValue.y,
                y
              ]
            }, transition2));
          }
        } else {
          saveAnimation(key, react.animate(ref.current, { [key]: value }, transition2));
        }
      },
      [getTransitionDetails]
    );
    const propsToPass = o.useRef({});
    for (const key of supportedProps) {
      propsToPass.current[key] = useInstantState(key);
      usePointCompare.usePointCompareEffect(() => () => clear(key), props[key]);
      usePointCompare.usePointCompareEffect(() => to(key, animate?.[key]), animate?.[key]);
    }
    o.useEffect(() => {
      firstRenderRef.current = false;
    }, []);
    return o.createElement(Component, {
      ...props,
      ...propsToPass.current,
      ref
    });
  };
}

exports.createMotionComponent = createMotionComponent;
//# sourceMappingURL=createMotionComponent.js.map
