/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | Cube Dev Team */
import { renderStyles } from "../pipeline/index.js";
import { injectGlobal } from "../injector/index.js";
import { resolveRecipes } from "../utils/resolve-recipes.js";
import { useInsertionEffect, useMemo, useRef } from "react";

//#region src/tasty/hooks/useGlobalStyles.ts
/**
* Hook to inject global styles for a given selector.
* Useful for styling elements by selector without generating classNames.
*
* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
* @param styles - Tasty styles object
*
* @example
* ```tsx
* function MyComponent() {
*   useGlobalStyles('.card', {
*     padding: '2x',
*     radius: '1r',
*     fill: '#white',
*   });
*
*   return <div className="card">Content</div>;
* }
* ```
*/
function useGlobalStyles(selector, styles) {
	const disposeRef = useRef(null);
	const resolvedStyles = useMemo(() => {
		if (!styles) return styles;
		return resolveRecipes(styles);
	}, [styles]);
	const styleResults = useMemo(() => {
		if (!resolvedStyles) return [];
		if (!selector) {
			console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
			return [];
		}
		return renderStyles(resolvedStyles, selector);
	}, [resolvedStyles, selector]);
	useInsertionEffect(() => {
		disposeRef.current?.();
		if (styleResults.length > 0) {
			const { dispose } = injectGlobal(styleResults);
			disposeRef.current = dispose;
		} else disposeRef.current = null;
		return () => {
			disposeRef.current?.();
			disposeRef.current = null;
		};
	}, [styleResults]);
}

//#endregion
export { useGlobalStyles };
//# sourceMappingURL=useGlobalStyles.js.map