import { store as blockEditorStore } from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import { useDispatch, useSelect } from "@wordpress/data";
import { useEffect } from "@wordpress/element";

export const BlockReplacer = ({ clientId }: { clientId: string }) => {
	const block = useSelect(
		(select) =>
			// @ts-expect-error-next-line - replaceBlock not added as a type?
			select(blockEditorStore).getBlock(clientId ?? ""),
		[clientId],
	);
	const { replaceBlock } = useDispatch(blockEditorStore);
	useEffect(() => {
		if (!block?.name || !replaceBlock || !clientId) return;
		const blockData = createBlock("core/image");
		replaceBlock(clientId, [blockData]).then(() => {
			const { clientId } = blockData;
			// Open the modal
			window.requestAnimationFrame(() => {
				window.requestAnimationFrame(() => {
					window.dispatchEvent(
						new CustomEvent("kevinbatdorf/unlimited-photos-open", {
							bubbles: true,
							detail: { clientId },
						}),
					);
				});
			});
		});
	}, [block, replaceBlock, clientId]);

	return null;
};