<script lang="ts">
  import Login from "./Login.svelte";
  import { Theme } from "carbon-components-svelte";
  import type { Auth0Client } from "@auth0/auth0-spa-js";

  import { onMount } from "svelte";
  import auth from "./authService";
  import { isAuthenticated, user, user_tasks, tasks } from "./store";
  import config from "./auth_config";

  let auth0Client: Auth0Client;

  onMount(async () => {
    auth0Client = await auth.createClient();

    isAuthenticated.set(await auth0Client.isAuthenticated());
    user.set(await auth0Client.getUser());
  });

  function login() {
    auth.loginWithPopup(auth0Client, config);
  }

  function logout() {
    auth.logout(auth0Client);
  }
</script>

<main class="w-100 pa3">
  <Theme
    render="toggle"
    toggle={{
      themes: ["g10", "g100"],
      labelA: "Light Mode",
      labelB: "Dark Mode",
      size: "sm",
    }}
    persist
    persistKey="__carbon-theme"
  />
  <Login handleLogin={login} />
</main>
