import { act, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

export interface RenderResult {
  container: HTMLDivElement;
  root: Root;
  rerender: (ui: ReactElement) => Promise<void>;
  unmount: () => Promise<void>;
}

export async function render(ui: ReactElement): Promise<RenderResult> {
  const container = document.createElement('div');
  document.body.appendChild(container);

  const root = createRoot(container);

  await act(async () => {
    root.render(ui);
  });

  return {
    container,
    root,
    rerender: async (nextUi: ReactElement) => {
      await act(async () => {
        root.render(nextUi);
      });
    },
    unmount: async () => {
      await act(async () => {
        root.unmount();
      });
      container.remove();
    },
  };
}

export async function flushMicrotasks(): Promise<void> {
  await act(async () => {
    await Promise.resolve();
  });
}