import { AnimationFrames, IsInViewport } from "runed";
import { prefersReducedMotion } from "svelte/motion";

const MAX_STEP = 0.05;

export class Loop {
	time = $state(0);

	constructor(target: () => Element | undefined, { start = 0, threshold = 0.4 } = {}) {
		this.time = start;
		const frames = new AnimationFrames(
			({ delta }) => {
				this.time += Math.min(MAX_STEP, delta / 1000);
			},
			{ immediate: false }
		);
		const visible = new IsInViewport(target as () => HTMLElement | undefined, { threshold });
		$effect(() => {
			if (visible.current && !prefersReducedMotion.current) frames.start();
			else frames.stop();
		});
	}
}