import * as React from 'react';

const DEFAULT_COLOR_HUE_DEGREES = 320 as const;

const DEFAULT_ANIMATION_DURATION = 60000 as const;

const DEFAULT_UPDATE_INTERVAL_MS = 50 as const;

const DEFAULT_COLOR_SATURATION_PERCENTAGE = 35 as const;

const DEFAULT_COLOR_LIGHTNESS_PERCENTAGE = 66 as const;

const MAX_HUE = 360 as const;

export interface UseHuePulsateOptions {
	animationDuration?: number;
	initialColorHueDegrees?: number;
	colorSaturationPercentage?: number;
	colorLightnessPercentage?: number;
	updateIntervalMs?: number;
	propertyName: string;
}

export const useHuePulsate = (options : UseHuePulsateOptions) => {
	React.useEffect(() => {
		const {
			animationDuration = DEFAULT_ANIMATION_DURATION,
			initialColorHueDegrees = DEFAULT_COLOR_HUE_DEGREES,
			updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS,
			colorSaturationPercentage = DEFAULT_COLOR_SATURATION_PERCENTAGE,
			colorLightnessPercentage = DEFAULT_COLOR_LIGHTNESS_PERCENTAGE,
			propertyName,
		} = options;

		const start = Date.now();
		const intervalHandle = window.setInterval(() => {
			//window.document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
			const elapsed = Date.now() - start;
			const progress = elapsed / animationDuration;
			const colorPrimaryHue = (initialColorHueDegrees + (progress * MAX_HUE)) % MAX_HUE;
			window.document.documentElement.style.setProperty(
				propertyName,
				`${colorPrimaryHue} ${colorSaturationPercentage}% ${colorLightnessPercentage}%`
			);
		}, updateIntervalMs);

		return () => {
			window.clearInterval(intervalHandle);
		};
	}, []);
};
