/**
 * Temporarily resets inline alignment styles that can distort scroll-based
 * size measurements, then restores them on the next animation frame.
 *
 * Ported from Base UI React `useCollapsiblePanel` (`resetLayoutStyles`).
 */
export function resetLayoutStyles(element: HTMLElement): () => void {
	const originalLayoutStyles = {
		"justify-content": element.style.justifyContent,
		"align-items": element.style.alignItems,
		"align-content": element.style.alignContent,
		"justify-items": element.style.justifyItems,
	} as const;

	for (const key of Object.keys(originalLayoutStyles)) {
		element.style.setProperty(key, "initial", "important");
	}

	function restoreLayoutStyles(): void {
		for (const [key, value] of Object.entries(originalLayoutStyles)) {
			if (value === "") {
				element.style.removeProperty(key);
				continue;
			}
			element.style.setProperty(key, value);
		}
	}

	const frame = requestAnimationFrame(restoreLayoutStyles);
	return () => {
		cancelAnimationFrame(frame);
		restoreLayoutStyles();
	};
}