/** @license MIT | @cube-dev/ui-kit v0.147.0 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
import { useBoardRegistry } from "./board-context.js";
import { CONTAINER_STYLES } from "@tenphi/tasty";
import { useEffect, useRef } from "react";

//#region src/components/layout/Board/Widget.tsx
/**
* Shallow-compare two style maps by their top-level keys. Direct style props
* (e.g. `fill`) are primitives, so this reliably detects a real change while
* ignoring the fresh object identity `extractStyles` produces each render.
*/
function shallowEqualStyles(a, b) {
	if (a === b) return true;
	if (!a || !b) return false;
	const aKeys = Object.keys(a);
	const bKeys = Object.keys(b);
	if (aKeys.length !== bKeys.length) return false;
	for (const key of aKeys) if (a[key] !== b[key]) return false;
	return true;
}
/**
* Declares a widget's content and per-widget options. Rendering and positioning
* are performed by the owning `Board` (the component itself renders nothing),
* which is what allows a widget to be transferred between boards.
*/
function Widget(props) {
	const { id, children, isDraggable, isResizable, resizeHandles, isCard, minW, maxW, minH, maxH, constraints, qa, isAutoHeight, dragCancel, dragHandle } = props;
	const registry = useBoardRegistry();
	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
	const nextStyles = Object.keys(extractedStyles).length > 0 ? extractedStyles : void 0;
	const stylesRef = useRef(void 0);
	if (!shallowEqualStyles(stylesRef.current, nextStyles)) stylesRef.current = nextStyles;
	const styles = stylesRef.current;
	const ownerRef = useRef({});
	useLayoutEffect$1(() => {
		registry?.store.register({
			id,
			content: children,
			isDraggable,
			isResizable,
			resizeHandles,
			isCard,
			minW,
			maxW,
			minH,
			maxH,
			constraints,
			qa,
			styles,
			isAutoHeight,
			dragCancel,
			dragHandle
		}, ownerRef.current);
	});
	useEffect(() => {
		const owner = ownerRef.current;
		return () => {
			registry?.store.unregister(id, owner);
		};
	}, [id]);
	return null;
}

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