import React, { Suspense, lazy, useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
import LoadingComponent from "../common/LoadingComponent";
import history from "../history";
import MenuItem from "../screens/Console/Menu/MenuItem";
// import RemoteComponent from "./RemoteComponent";
// import loadMenu from "saturn_tenant/menu";

// const URL = "http://localhost:9000/remoteEntry.js";
// const SCOPE = "saturn_tenant";

const RemoteSaturnTenant = lazy(() => import("saturn_tenant/App"));
const RemoteSaturnTenantFullscreen = lazy(
  () => import("saturn_tenant/AppFullscreen")
);
const RemoteMenuContainer = lazy(() => import("saturn_tenant/MenuContainer"));

// const loadMenu = () => import("saturn_tenant/menu");
// console.log("loadMenu", loadMenu);

// export function SaturnTenant() {
//   return <RemoteComponent url={URL} scope={SCOPE} module="./App" />;
// }

// export function SaturnTenantFullscreen() {
//   return <RemoteComponent url={URL} scope={SCOPE} module="./AppFullscreen" />;
// }

/** 在 Layout 下展示的内容 */
export function SaturnTenant() {
  return (
    <Suspense fallback={<LoadingComponent />}>
      <RemoteSaturnTenant history={history} />
    </Suspense>
  );
}

/** 全屏展示的内容 */
export function SaturnTenantFullscreen() {
  return (
    <Suspense fallback={<LoadingComponent />}>
      <RemoteSaturnTenantFullscreen history={history} />
    </Suspense>
  );
}

/** 全屏展示的内容 */
export function SaturnTenantMenuContainer({
  children,
  isOpen,
  groupState,
}: {
  children: React.ReactNode;
  isOpen: boolean;
  groupState: {
    openGroup: string;
    setOpenGroup: React.Dispatch<React.SetStateAction<string>>;
    expandedGroup: string;
    setExpandedGroup: React.Dispatch<React.SetStateAction<string>>;
  };
}) {
  return (
    <Suspense fallback={<LoadingComponent />}>
      <RemoteMenuContainer context={{ MenuItem, NavLink, isOpen, groupState }}>
        {children}
      </RemoteMenuContainer>
    </Suspense>
  );
}

// /** 加载一个函数方法 */
// export function useSaturnConsoleMenu() {
//   const [menu, setMenu] = useState([]);

//   // useEffect(() => {
//   //   import("saturn_tenant/consoleMenu")
//   //     .then((res) => {
//   //       const createMenu = res.default;
//   //       createMenu(NavLink).then((menu) => {
//   //         setMenu(menu);
//   //       });
//   //     })
//   //     .catch((e) => {
//   //       console.error(e);
//   //     });
//   // }, []);

//   return menu;
// }
