<script>
  import "./TailwindStyles.svelte";
  import "toastify-js/src/toastify.css";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
    window.scrollTo(0, 0);
  });
  if (config.prefersHashRouting) {
    if (config.prefersHashRouting === true) {
      router.useHashNavigation();
    }
  }
  import localForage from "localforage";
  import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
  import en from "./locales/en.json";
  import de from "./locales/de.json";
  addMessages("en", en);
  addMessages("de", de);
  init({
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator(),
  });
  localForage.config({
    name: "lfk_admin",
    version: 1.0,
    storeName: "lfk_admin",
    description: "LfK! admin dashbaord",
  });
  //
  import Login from "./components/Login.svelte";
  import Dashboard from "./components/Dashboard.svelte";
  import store from "./store.js";
  import NotFound from "./components/NotFound.svelte";
  import ForgotPassword from "./components/ForgotPassword.svelte";
  import MainDashContent from "./components/MainDashContent.svelte";
  import Users from "./components/Users.svelte";
  import About from "./components/About.svelte";
  import Settings from "./components/Settings.svelte";
  import Transition from "./components/Transition.svelte";
  import Orgs from "./components/Orgs.svelte";
  import Runners from "./components/Runners.svelte";
  import Footer from "./components/Footer.svelte";
  import Tracks from "./components/Tracks.svelte";
  import TracksOverview from "./components/TracksOverview.svelte";
  import OrgDetail from "./components/OrgDetail.svelte";
  import Teams from "./components/Teams.svelte";
  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
  import UserDetail from "./components/UserDetail.svelte";
  OpenAPI.BASE = config.baseurl;
  store.init();

  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("/sw.js").then(
        (registration) => {
          // console.log(`sw successful with scope: ${registration.scope}`);
        },
        (err) => {
          // console.log(`sw failed: ${err}`);
        }
      );
    });
  }
</script>

<style>
  .bg-gray-900 {
    background-color: #121317;
  }
</style>

<Route>
  {#if $router.path === '/forgot_password'}
    <Route path="/forgot_password">
      <ForgotPassword />
    </Route>
  {:else if $router.path === '/about'}
    <Route path="/about">
      <About />
    </Route>
  {:else if $store.isLoggedIn}
    <Dashboard>
      <Transition>
        <Route path="/">
          <MainDashContent />
        </Route>
        <Route path="/users/*">
          <Route path="/">
            <Users />
          </Route>
          <Route path="/:userid" let:params>
            <UserDetail {params} />
          </Route>
        </Route>
        <Route path="/tracks/*">
          <Route path="/">
            <TracksOverview />
          </Route>
          <Route path="/:trackid" let:params />
        </Route>
        <Route path="/runners">
          <Runners />
        </Route>
        <Route path="/teams">
          <Teams />
        </Route>
        <Route path="/orgs/*">
          <Route path="/">
            <Orgs />
          </Route>
          <Route path="/:orgid" let:params>
            <OrgDetail {params} />
          </Route>
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/settings">
          <Settings />
        </Route>
      </Transition>
      <Footer />
    </Dashboard>
  {:else}
    <Login />
  {/if}
</Route>
