import React from "react";
import { configure } from "mobx";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import RootStore from "./stores/Root";
import { StoreContext } from './stores/StoreContext';
import "./assets/global.css";
import App from "./views/App";
import Login from "./views/Login";
import SignOut from "./views/SignOut";
import Index from "./views/index";
import ErrorPage from "./views/error-page";
import PlanNewest from "./views/plan/Newest";

configure({ 
  useProxies: "ifavailable",
  enforceActions: "always",
  computedRequiresReaction: true,
  reactionRequiresObservable: true,
  observableRequiresReaction: true,
  disableErrorBoundaries: true
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Index /> },
      {
        path: "plan/newest",
        element: <PlanNewest />,
      }
    ],    
    // path: "/test-404",
    // element: <Login />,
  },
  {
    element: <App />,
    children: [
      {
        path: "/login",
        element: <Login />,
      },
      {
        path: "/sign-out",
        element: <SignOut />,
      }
    ]
  }
]);

const rootStore = new RootStore();

ReactDOM.createRoot(document.getElementById("root")).render(
  //<React.StrictMode>
    <StoreContext.Provider value={rootStore}>
      <RouterProvider 
        router={router}
        fallbackElement={() => <div>Loading...</div>}
      />
    </StoreContext.Provider>
  //</React.StrictMode>
);