<script lang="ts">
  import type { AccountMetadata } from "./pdsfetch";
  import { getTealNowListeningTo, getStatusSphere } from "./pdsfetch";
  const { account }: { account: AccountMetadata } = $props();
  import { Config } from "../../config";

  let nowListeningTo: string | null = $state(null);
  let statusEmoji: string | null = $state(null);

  $effect(() => {
    if (account.did) {
      getTealNowListeningTo(account.did).then((res) => {
        nowListeningTo = res;
      });
      getStatusSphere(account.did).then((res) => {
        statusEmoji = res;
      });
    }
  });
</script>

<a id="link" href="{Config.FRONTEND_PROFILE_URL}/{account.did}">
  <div id="accountContainer">
    {#if account.avatarCid}
      <span class="avatar-wrapper">
        {#if statusEmoji}
          <span class="avatar-badge" aria-hidden="true" title="icon"
            >{statusEmoji}</span
          >
        {/if}
        <img
          id="avatar"
          alt="avatar of {account.displayName}"
          src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
        />
      </span>
      <div class="name-block" style="margin-left: 12px;">
        <div id="accountName" style="margin-left: 0;">
          {account.displayName || account.handle || account.did}
        </div>
        {#if nowListeningTo}
          <div class="now-playing"><span>{nowListeningTo}</span></div>
        {/if}
      </div>
    {:else}
      <span class="avatar-wrapper">
        {#if statusEmoji}
          <span class="avatar-badge" aria-hidden="true" title="icon"
            >{statusEmoji}</span
          >
        {/if}

        <img
          id="avatar"
          alt="unknown avatar of {account.displayName}"
          src="/unknown.png"
        />
      </span>
      <div class="name-block" style="margin-left: 12px;">
        <div id="accountName" style="margin-left: 0;">
          {account.displayName || account.handle || account.did}
        </div>
        {#if nowListeningTo}
          <div class="now-playing"><span>{nowListeningTo}</span></div>
        {/if}
      </div>
    {/if}
  </div>
</a>

<style>
  .avatar-wrapper {
    position: relative;
    display: inline-block;
  }

  .avatar-badge {
    position: absolute;
    top: 34px;
    left: 40px;
    font-size: 24px;
    line-height: 1;
  }

  .name-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  #accountName {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .now-playing {
    font-size: 0.8em;
    opacity: 0.8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
  }

  .now-playing > span {
    display: inline-block;
    padding-left: 100%;
    animation: account-now-playing-marquee 25s linear infinite;
  }

  @keyframes account-now-playing-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
</style>
