import React, { FC, useRef, useEffect, Suspense } from 'react';
import { Root, createRoot } from 'react-dom/client';
import { IPreviewerProps } from 'dumi';
import DefaultPreviewer from 'dumi/theme-default/builtins/Previewer';

const Previewer: FC<IPreviewerProps> = ({ children, ...props }) => {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let root: Root
    if (ref.current) {
      root = createRoot(ref.current)
      root.render(<Suspense fallback={<div>loading...</div>}>{children}</Suspense>)
    }
    return () => {
      if (root) {
        root.unmount()
      }
    }
  }, []);
  return <DefaultPreviewer {...props}><div ref={ref} /></DefaultPreviewer>;
};

export default Previewer;