/**
 * Fades a block back in whenever the value passed to it changes - used to make
 * a day switch visible in the hourly table, the written forecast and the
 * meteograms.
 *
 * It animates the existing node instead of remounting it: the meteograms hold
 * canvas charts with their own zoom state, and rebuilding those on every day
 * change would be both expensive and lossy.
 */
export function daySwap(node: HTMLElement, key: unknown) {
	let current = key;

	const play = () => {
		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
		node.animate(
			[
				{ opacity: 0.15, transform: 'translateY(4px)' },
				{ opacity: 1, transform: 'translateY(0)' }
			],
			{ duration: 280, easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)' }
		);
	};

	return {
		update(next: unknown) {
			if (next === current) return;
			current = next;
			play();
		}
	};
}