import { __read, __spreadArray } from 'tslib';
import { wrap } from 'popmotion';
import { useRef, useState, useCallback } from 'react';
/**
* Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
*
* An index value can be passed to the returned `cycle` function to cycle to a specific index.
*
* ```jsx
* import * as React from "react"
* import { motion, useCycle } from "framer-motion"
*
* export const MyComponent = () => {
* const [x, cycleX] = useCycle(0, 50, 100)
*
* return (
* <motion.div
* animate={{ x: x }}
* onTap={() => cycleX()}
* />
* )
* }
* ```
*
* @param items - items to cycle through
* @returns [currentState, cycleState]
*
* @public
*/
function useCycle() {
var items = [];
for (var _i = 0; _i < arguments.length; _i++) {
items[_i] = arguments[_i];
}
var index = useRef(0);
var _a = __read(useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
var runCycle = useCallback(function (next) {
index.current =
typeof next !== "number"
? wrap(0, items.length, index.current + 1)
: next;
setItem(items[index.current]);
}, __spreadArray([items.length], __read(items), false));
return [item, runCycle];
}
export { useCycle };