import { useEffect, useLayoutEffect, useRef } from "react";

/**
 * Taken and adapted from: https://usehooks-ts.com/react-hook/use-interval
 *
 * We'd use useInterval from react-use in our normal code. But we want to be lean on dependencies in the design system.
 */
export default function useInterval(
	callback: () => void,
	delayMs: number | null,
) {
	const savedCallback = useRef(callback);

	useLayoutEffect(() => {
		savedCallback.current = callback;
	}, [callback]);

	useEffect(() => {
		// Don't schedule if no delay is specified.
		// Note: 0 is a valid value for delay.
		if (delayMs === null) {
			return;
		}

		const id = setInterval(() => {
			savedCallback.current();
		}, delayMs);

		return () => {
			clearInterval(id);
		};
	}, [delayMs]);
}