import { forwardRef, useImperativeHandle, useState } from "react";
import { createPortal, flushSync } from "react-dom";

/**
 * A helper component to render a single element to a container so we can subsequently read the DOM / HTML contents
 *
 * This is useful so we can render arbitrary React elements (blocks) in the correct context (used by `ReactRenderUtil`)
 */
export const ElementRenderer = forwardRef<
  (node: React.ReactNode, container: HTMLElement) => void
>((_props, ref) => {
  const [singleRenderData, setSingleRenderData] = useState<
    { node: React.ReactNode; container: HTMLElement } | undefined
  >();

  useImperativeHandle(ref, () => {
    return (node: React.ReactNode, container: HTMLElement) => {
      flushSync(() => {
        setSingleRenderData({ node, container });
      });

      // clear after it's been rendered to `container`
      setSingleRenderData(undefined);
    };
  }, []);

  return (
    <>
      {singleRenderData &&
        createPortal(singleRenderData.node, singleRenderData.container)}
    </>
  );
});