"use client";
'use strict';

var useIsomorphicEffect = require('../utils/use-isomorphic-effect.js');
var useMotionValue = require('./use-motion-value.js');
var frame = require('../../../../../../motion-dom@12.38.0/node_modules/motion-dom/dist/es/frameloop/frame.js');

function useCombineMotionValues(values, combineValues) {
    /**
     * Initialise the returned motion value. This remains the same between renders.
     */
    const value = useMotionValue.useMotionValue(combineValues());
    /**
     * Create a function that will update the template motion value with the latest values.
     * This is pre-bound so whenever a motion value updates it can schedule its
     * execution in Framesync. If it's already been scheduled it won't be fired twice
     * in a single frame.
     */
    const updateValue = () => value.set(combineValues());
    /**
     * Synchronously update the motion value with the latest values during the render.
     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
     */
    updateValue();
    /**
     * Subscribe to all motion values found within the template. Whenever any of them change,
     * schedule an update.
     */
    useIsomorphicEffect.useIsomorphicLayoutEffect(() => {
        const scheduleUpdate = () => frame.frame.preRender(updateValue, false, true);
        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
        return () => {
            subscriptions.forEach((unsubscribe) => unsubscribe());
            frame.cancelFrame(updateValue);
        };
    });
    return value;
}

exports.useCombineMotionValues = useCombineMotionValues;
