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 Standlone from "@/views/Standlone";
import Login from "@/views/Login";
import Index from "@/views/index";
import ErrorPage from "@/views/error-page";
import ReservationNewest from "@/views/reservation/Newest";
import ReservationDetail from "@/views/reservation/Detail";
import ChangePassword from "@/views/account/ChangePassword";
import AccountProfile from "@/views/account/Profile";
import FeedbackIndex from "@/views/feedback/Index";
import FeedbackDetail from "@/views/feedback/Detail";
import NoticeIndex from "@/views/notice/Index";
import NoticeDetail from "@/views/notice/Detail";
import InvoiceIndex from "@/views/invoice/Index";
import InvoiceDetail from "@/views/invoice/Detail";


configure({ 
  useProxies: "ifavailable",
  enforceActions: "observed",
  computedRequiresReaction: true,
  observableRequiresReaction: false,
  reactionRequiresObservable: true,
  disableErrorBoundaries: process.env.NODE_ENV == "production"
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Index /> },
      { path: "reservation/newest", element: <ReservationNewest />},
      { path: "reservation/:reservationId", element: <ReservationDetail />},
      { path: "account/change-password", element: <ChangePassword />},
      { path: "account/profile", element: <AccountProfile />},
      { path: "feedback", element: <FeedbackIndex />},
      { path: "feedback/:GRI_SN/:RefNo", element: <FeedbackDetail />},
      { path: "notice", element: <NoticeIndex />},
      { path: "notice/:CCP_BLID", element: <NoticeDetail />},
      { path: "invoice",element:<InvoiceIndex />},
      { path: "invoice/detail/:GMDSN/:GSN",element:<InvoiceDetail />},
    ]
  },
  {
    element: <Standlone />,
    children: [
      { path: "/login", element: <Login /> },
    ]
  }
]);

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>
);