"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAnimationState = void 0;
var _moti = require("moti");
var _theme = require("../theme");
var _useMotiWithStyleProps = require("./useMotiWithStyleProps");
var _react = require("react");
/**
 * This function is a custom hook that creates an animation state using the provided props and style functions.
 *
 * @param props - The animation state props. These are the properties that define the animation state.
 * @param styleFunctions - The style functions to use. These functions are used to convert the provided props into a format that can be used to create an animation state. If no style functions are provided, all style functions are used by default.
 *
 * @returns An animation state created using the provided props and style functions.
 */
const useAnimationState = (props, styleFunctions = _theme.boxStyleFunctions) => {
  // Use the useMemo hook to memoize the converted props. This will prevent unnecessary computations if the props and style functions have not changed.
  const convertedProps = (0, _react.useMemo)(() => (0, _useMotiWithStyleProps.useMotiWithStyleProps)(props, styleFunctions), [props, styleFunctions]);

  // Use the useMemo hook to memoize the animation state. This will prevent unnecessary computations if the converted props have not changed.
  const animationState = (0, _react.useMemo)(() => (0, _moti.useAnimationState)(convertedProps), [convertedProps]);

  // Return the memoized animation state.
  return animationState;
};
exports.useAnimationState = useAnimationState;
//# sourceMappingURL=useAnimationState.js.map