<script lang="ts">
  import Auth from "./lib/components/Auth/Auth.svelte";
  import Chat from "./lib/components/Chat/Chat.svelte";
  import Login from "./lib/components/Auth/Login.svelte";
  import Register from "./lib/components/Auth/Register.svelte";
  import { getUser, pb } from "./lib/pocketbase.svelte";

  let page = $state("");

  function cancel() {
    page = "auth";
  }

  $effect(() => {
    const user = getUser();
    $inspect(user);

    if (!user) {
      page = "auth";
    } else {
      page = "app";
    }
  });
</script>

{#if page == "auth"}
  <Auth showLogin={() => (page = "login")} showRegister={() => (page = "register")}></Auth>
{:else if page == "login"}
  <Login {cancel} />
{:else if page == "register"}
  <Register {cancel} />
{:else if page == "app"}
  <Chat />
{/if}
