import React, { Suspense } from "react";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import LazyLoad, { Loading } from "./LazyLoad";

// const Match = React.lazy(() => import("./Match"));
// const WaitRoom = React.lazy(() => import("./WaitRoom"));
// const Mora = React.lazy(() => import("./Mora"));
// const NeosDuel = React.lazy(() => import("./Duel/Main"));
// const Replay = React.lazy(() => import("./Replay"));
// const SSO = React.lazy(() => import("./SSO"));
// const Profile = React.lazy(() => import("./Profile"));
// const Build = React.lazy(() => import("./Build"));

// TODO: finish this
const _router = createBrowserRouter([
  {
    path: "/",
    lazy: () => import("./Layout"),
    children: [
      {
        path: "/",
        lazy: () => import("./Start"),
      },
      {
        path: "/match/*",
        lazy: () => import("./NewMatch"),
      },
      {
        path: "/build",
        lazy: () => import("./Build"),
      },
      {
        path: "/profile",
        lazy: () => import("./NewProfile"),
      },
      {
        path: "/waitroom/:ip/:player/:passWd",
        lazy: () => import("./NewWaitRoom"),
      },
      {
        path: "/duel/:ip/:player/:passWd",
      },
    ],
  },
]);

// 暂且先这么写，为后重构为createBrowserRouter打基础
// const router = createBrowserRouter(
//   createRoutesFromElements(
//     <Route path="/" element={<NeosLayout />}>
//       <Route path="/" element={<LazyLoad lazy={<Start />} />} />
//       <Route path="/profile" element={<LazyLoad lazy={<Profile />} />} />
//       <Route path="/match" element={<LazyLoad lazy={<Match />} />} />
//       <Route
//         path="/room/:player/:passWd/:ip"
//         element={
//           <Suspense fallback={<Loading />}>
//             <WaitRoom />
//           </Suspense>
//         }
//       />
//       <Route
//         path="/mora/:player/:passWd/:ip"
//         element={
//           <Suspense fallback={<Loading />}>
//             <Mora />
//           </Suspense>
//         }
//       />
//       <Route path="/replay" element={<LazyLoad lazy={<Replay />} />} />
//       <Route
//         path="/duel/:player/:passWd/:ip"
//         element={
//           <Suspense fallback={<Loading />}>
//             <NeosDuel />
//           </Suspense>
//         }
//       />
//       <Route path="/sso/*" element={<LazyLoad lazy={<SSO />} />} />
//     </Route>
//   )
// );

export const NeosRouter = () => <RouterProvider router={_router} />;
