"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "createMotionComponent", {
    enumerable: true,
    get: function() {
        return createMotionComponent;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAnimateAtoms = require("../hooks/useAnimateAtoms");
const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
const _getChildElement = require("../utils/getChildElement");
const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
function createMotionComponent(value) {
    const Atom = (props)=>{
        'use no memo';
        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
        const params = _rest;
        const child = (0, _getChildElement.getChildElement)(children);
        const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
        const elementRef = _react.useRef();
        const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
        const optionsRef = _react.useRef({
            skipMotions,
            params
        });
        const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
        const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
        const onMotionStart = (0, _reactutilities.useEventCallback)(()=>{
            onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
        });
        const onMotionFinish = (0, _reactutilities.useEventCallback)(()=>{
            onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
        });
        const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
        });
        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
            // Heads up!
            // We store the params in a ref to avoid re-rendering the component when the params change.
            optionsRef.current = {
                skipMotions,
                params
            };
        });
        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
            const element = elementRef.current;
            if (element) {
                const atoms = typeof value === 'function' ? value({
                    element,
                    ...optionsRef.current.params
                }) : value;
                onMotionStart();
                const handle = animateAtoms(element, atoms, {
                    isReducedMotion: isReducedMotion()
                });
                handleRef.current = handle;
                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
                if (optionsRef.current.skipMotions) {
                    handle.finish();
                }
                return ()=>{
                    handle.cancel();
                };
            }
        }, [
            animateAtoms,
            handleRef,
            isReducedMotion,
            onMotionFinish,
            onMotionStart,
            onMotionCancel
        ]);
        return _react.cloneElement(children, {
            ref: (0, _reactutilities.useMergedRefs)(elementRef, child.ref)
        });
    };
    return Atom;
}