<script lang="ts">
  import { onMount } from "svelte";
  import { cursorPositionOnScreen } from "../../events/cursor";
  import { friendsCursorPositions } from "../../events/friend-cursor";
  import { appData } from "../../events/app-data";
  import { activeDollSpriteUrl } from "../../events/active-doll-sprite";
  import { friendActiveDollSpriteUrls } from "../../events/friend-active-doll-sprite";
  import { sceneInteractive } from "../../events/scene-interactive";
  import {
    friendsPresenceStates,
    currentPresenceState,
  } from "../../events/user-status";
  import { commands } from "$lib/bindings";
  import DebugBar from "./components/debug-bar.svelte";
  import Neko from "./components/neko/neko.svelte";
  import PetMenu from "./components/pet-menu/pet-menu.svelte";
  import PetMessagePop from "./components/pet-message-pop.svelte";
  import PetMessageSend from "./components/pet-message-send.svelte";
  import type { UserBasicDto } from "$lib/bindings";

  let debugMode = false;

  onMount(async () => {
    const config = await commands.getClientConfig();
    debugMode = config.debug_mode;
  });

  function getFriend(friendId: string): UserBasicDto | undefined {
    return (
      ($appData?.friends ?? []).find((friend) => friend.friend?.id === friendId)
        ?.friend ?? undefined
    );
  }
</script>

<div class="w-svw h-svh p-4 relative overflow-hidden">
  <button
    class="absolute inset-0 z-10 size-full"
    aria-label="Deactive scene interactive"
    onmousedown={async () => {
      await commands.setSceneInteractive(false, true);
    }}>&nbsp;</button
  >
  {#if $appData?.user?.activeDollId}
    <Neko
      targetX={$cursorPositionOnScreen.raw.x}
      targetY={$cursorPositionOnScreen.raw.y}
      spriteUrl={$activeDollSpriteUrl}
    />
  {/if}
  {#each Object.entries($friendsCursorPositions) as [friendId, position] (friendId)}
    {#if $friendActiveDollSpriteUrls[friendId]}
      {@const friend = getFriend(friendId)}
      <Neko
        targetX={position.raw.x}
        targetY={position.raw.y}
        spriteUrl={$friendActiveDollSpriteUrls[friendId]}
        initialX={position.raw.x}
        initialY={position.raw.y}
      >
        <PetMenu user={friend!} ariaLabel={`Open ${friend?.name} actions`} />
        <PetMessagePop userId={friendId} />
        <PetMessageSend userId={friendId} userName={friend?.name ?? "Friend"} />
      </Neko>
    {/if}
  {/each}
  {#if debugMode}
    <div id="debug-bar">
      <DebugBar
      isInteractive={$sceneInteractive}
      cursorPosition={$cursorPositionOnScreen}
      presenceStatus={$currentPresenceState?.presenceStatus ?? null}
      friendsCursorPositions={$friendsCursorPositions}
      friends={$appData?.friends ?? []}
      friendsPresenceStates={$friendsPresenceStates}
      />
    </div>
  {/if}
</div>
