import { Route, Router } from "@solidjs/router";
import { ThemeProvider } from "@suid/material";
import {
  Component,
  createRenderEffect,
  createSignal,
  ErrorBoundary,
  lazy,
  onCleanup,
} from "solid-js";
import { useRootTheme } from "./material/mui.js";
import {
  Provider as ClientProvider,
  createMastoClientFor,
  type Session,
} from "./masto/clients.js";
import { $accounts } from "./accounts/stores.js";
import { useStore } from "@nanostores/solid";
import { DateFnScope, useLanguage } from "./platform/i18n.jsx";

const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
const AccountMastodonOAuth2Callback = lazy(
  () => import("./accounts/MastodonOAuth2Callback.js"),
);
const TimelineHome = lazy(() => import("./timelines/Home.js"));
const Settings = lazy(() => import("./settings/Settings.js"));
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
const MotionSettings = lazy(() => import("./settings/Motions.js"));
const LanguageSettings = lazy(() => import("./settings/Language.js"));
const RegionSettings = lazy(() => import("./settings/Region.jsx"));

const Routing: Component = () => {
  return (
    <Router>
      <Route path="/" component={TimelineHome}>
        <Route path=""></Route>
        <Route path="/settings" component={Settings}>
          <Route path=""></Route>
          <Route path="/language" component={LanguageSettings}></Route>
          <Route path="/region" component={RegionSettings}></Route>
          <Route path="/motions" component={MotionSettings}></Route>
        </Route>
        <Route path="/:acct/:id" component={TootBottomSheet}></Route>
      </Route>
      <Route path={"/accounts"}>
        <Route path={"/sign-in"} component={AccountSignIn} />
        <Route
          path={"/oauth2/mastodon"}
          component={AccountMastodonOAuth2Callback}
        />
      </Route>
    </Router>
  );
};

const App: Component = () => {
  const theme = useRootTheme();
  const accts = useStore($accounts);
  const clientStore = createSignal<Session[]>([]);
  const lang = useLanguage();

  createRenderEffect(() => {
    const [, setClients] = clientStore;
    setClients(
      accts().map((x) => ({ account: x, client: createMastoClientFor(x) })),
    );
  });

  createRenderEffect(() => {
    const root = document.querySelector(":root")!;
    root.setAttribute("lang", lang());
  });

  onCleanup(() => {
    const root = document.querySelector(":root")!;
    root.removeAttribute("lang");
  });

  const UnexpectedError = lazy(() => import("./UnexpectedError.js"));

  return (
    <ErrorBoundary
      fallback={(err, reset) => {
        console.error(err);
        return <UnexpectedError error={err} />;
      }}
    >
      <ThemeProvider theme={theme()}>
        <DateFnScope>
          <ClientProvider value={clientStore}>
            <Routing />
          </ClientProvider>
        </DateFnScope>
      </ThemeProvider>
    </ErrorBoundary>
  );
};

export default App;