import type { LoadingVariousProps } from "$/types/LoadingTypes";
import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
import { useId } from "react";


export default function BouncingDot({
	size,
	width,
	height,
	className,
	animationDuration = 900,
	color,
	stroke,
	fill,
	ariaLabel = "Loading"
}: Readonly<LoadingVariousProps>){
	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bouncing-ball.svg
	const id = useId();
	const reducedMotion = usePrefersReducedMotion();
	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;


	return (
		<svg
		width={size ?? width}
		height={size ?? height}
		role="status"
		aria-live="polite"
		aria-label={ariaLabel}
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
	>
		<ellipse
			cx="12"
			cy="5"
			rx="4"
			ry="4"
			className={className}
			stroke={color ?? stroke}
			fill={color ?? fill}
		>
			<animate
				id={`dot1_1_${id}`}
				begin={`0;dot1_5_${id}.end`}
				attributeName="cy"
				calcMode="spline"
				dur={dur * 5 / 12}
				values="5;20"
				keySplines=".33,0,.66,.33"
				fill="freeze"
			/>
			<animate
				begin={`dot1_1_${id}.end`}
				attributeName="rx"
				calcMode="spline"
				dur={dur / 18}
				values="4;4.8;4"
				keySplines=".33,0,.66,.33;.33,.66,.66,1"
			/>
			<animate
				begin={`dot1_1_${id}.end`}
				attributeName="ry"
				calcMode="spline"
				dur={dur / 18}
				values="4;3;4"
				keySplines=".33,0,.66,.33;.33,.66,.66,1"
			/>
			<animate
				id={`dot1_4_${id}`}
				begin={`dot1_1_${id}.end`}
				attributeName="cy"
				calcMode="spline"
				dur={dur / 36}
				values="20;20.5"
				keySplines=".33,0,.66,.33"
			/>
			<animate
				id={`dot1_5_${id}`}
				begin={`dot1_4_${id}.end`}
				attributeName="cy"
				calcMode="spline"
				dur={dur * 4 / 9}
				values="20.5;5"
				keySplines=".33,.66,.66,1"
			/>
		</ellipse>
	</svg>
	);
}
