import '@/App.css';
import { Loading, lazy } from 'solid-js';
import { createRouter } from "@solidjs/router";
import {
  MatrixContext,
  loadMatrixSession,
  matrixClient,
} from '@/matrix';

export const Router = createRouter({
  routes: [
    { path: "/", component: lazy(() => import("./pages/index")) },
    { path: "/status", component: lazy(() => import("./pages/status")) },
    { path: "*404", component: lazy(() => import("./pages/404")) }
  ]
});

// Restore the authenticated client from storage
void loadMatrixSession();

// The app root: the router and the site-wide layout live here. Pages are
// the modules under src/routes.
export default function App() {
  return (
    <Router>
      {(props) => (
        <>
          <Loading fallback={<main>Loading…</main>}>
            <MatrixContext value={matrixClient()}>
              {props.children}
            </MatrixContext>
          </Loading>
        </>
      )}
    </Router>
  );
}