import { useEffect } from "react"
import { customBlock } from "../index.js"

/**
 * Measures the sandbox's `#root` element and posts `resize` messages so the host iframe
 * matches the block's border-box height. Unchanged values are deduped.
 *
 * `<NotionCustomBlock>` calls this hook for you by default — only reach for it directly
 * when you need to drive `enabled` yourself (e.g. behind a debug toggle). In that case,
 * pass `autoResize={false}` to the provider to avoid running it twice. For full-bleed
 * views that should fill their slot, pass `autoResize={false}` and skip the hook.
 *
 * @example
 * <NotionCustomBlock autoResize={false}>
 *   <App />
 * </NotionCustomBlock>
 *
 * function App() {
 *   const [enabled, setEnabled] = useState(true)
 *   useCustomBlockAutoResize({ enabled })
 *   return <div>…</div>
 * }
 */
export function useCustomBlockAutoResize(
	args: {
		/**
		 * Whether or not the hook is enabled. To disable this behavior, pass `false`. This is
		 * provided as an argument to allow for conditional disabling of the hook.
		 *
		 * @default true
		 */
		enabled?: boolean
	} = {},
): void {
	const { enabled = true } = args
	useEffect(() => {
		if (!enabled) {
			return
		}
		if (typeof window === "undefined") {
			return
		}
		const target = document.getElementById("root")
		return customBlock.autoResize({ target })
	}, [enabled])
}