import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
  useEffect,
  useState,
} from "react";
import type { ReactNode } from "react";
import { CssVarsProvider, CssBaseline } from "@mui/joy";
import type { EmotionCache } from "@emotion/react";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { default as $ } from "jquery";

interface JoyUIRootIslandProps {
  children: ReactNode;
}

export function JoyUIRootIsland({ children }: JoyUIRootIslandProps): React.ReactElement {
  const cache = React.useRef<EmotionCache | null>(null);
  if (!cache.current) {
    cache.current = createCache({ key: "joy" });
  }
  React.useEffect(() => {
    const current = cache.current;
    return () => current?.sheet.flush();
  }, []);
  return (
    <CacheProvider value={cache.current!}>
      <CssVarsProvider>{children}</CssVarsProvider>
    </CacheProvider>
  );
}

