<script lang="ts">
  import { Status, type Server, type Group, type Friend } from "$lib";
  import AppSidebar from "$lib/components/app-sidebar.svelte";
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";

  let currentPageID: string|null = $state(null);
  let currentPageType: string|null = $state(null);
  let currentPage: Friend | Group | Server | null = $state(null);

  const overview_data = {
    friends: [
      { id: crypto.randomUUID(), name: "Alice", status: Status.OFFLINE, image: "https://placehold.co/40x40" },
      { id: crypto.randomUUID(), name: "Bob", status: Status.DND, image: "https://placehold.co/40x40" },
      { id: crypto.randomUUID(), name: "Charlie", status: Status.ONLINE, image: "https://placehold.co/40x40" },
    ],
    groups: [
      { id: crypto.randomUUID(), name: "Work Team", members: 5 },
      { id: crypto.randomUUID(), name: "Gaming Group", members: 8 },
    ],
    servers: [
      { id: crypto.randomUUID(), name: "Main Server", image: "https://placehold.co/40x40" },
      { id: crypto.randomUUID(), name: "Backup Server", image: "https://placehold.co/40x40" },
    ],
  };

  $effect(() => {
    if (currentPageID) {
      let f = overview_data.friends.find(friend => friend.id === currentPageID);
      let g = overview_data.groups.find(group => group.id === currentPageID);
      let s = overview_data.servers.find(server => server.id === currentPageID);

      if(f) {
        currentPageType = "friend";
        currentPage = f;
      } else if(g) {
        currentPageType = "group";
        currentPage = g;
      } else if(s) {
        currentPageType = "server";
        currentPage = s;
      }
    } else {
      currentPage = null;
      currentPageType = null;
    }
  });
</script>

<Sidebar.Provider>
  <AppSidebar bind:currentPage={currentPageID} data={overview_data} />

  <Sidebar.Inset>
    <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
      <Sidebar.Trigger class="-ms-1" />
      {#if currentPageType == "server"}
          {@const server = (currentPage as Server)}

          <img src={server!.image} alt={server!.name} class="size-6 rounded-full" />

          <h1>{server!.name}</h1>
      {:else if currentPageType == "friend"}
            {@const friend = (currentPage as Friend)}

          <img src={friend.image} alt={friend!.name} class="size-6 rounded-full" />

          <h1>{friend!.name} [{friend.status == Status.ONLINE ? "Online!" : friend.status == Status.DND ? "DND" : friend.status == Status.OFFLINE ? "Offline" : "Unknown"}]</h1>
      {:else if currentPageType == "group"}
      {@const group = (currentPage as Group)}

          <h1>{group!.name} ({group.members} member{group.members > 1 ? "s" : ""})</h1>
      {/if}
    </header>
    <h1> this is like lowkirkounely the content, i should put messages and shi here</h1>
  </Sidebar.Inset>
</Sidebar.Provider>
