<script context="module" lang="ts">
  import { fetchAccount, type MastodonAccount } from '$lib/mastoapi/account';
  import type { Load } from '@sveltejs/kit';

  export const load: Load = async ({ session, params }) => {
    try {
      const account = await fetchAccount(session.instance, params.id);
      return { props: { account } };
    } catch (err) {
      return { status: 404, error: err as Error };
    }
  };
</script>

<script lang="ts">
  import AccountProfile from '$lib/components/AccountProfile.svelte';
  import { session } from '$app/stores';
  import { fetchAPI } from '$lib/mastoapi/util';
  import type { MastodonStatus } from '$lib/mastoapi/status';
  import Status from '$lib/components/Status.svelte';

  export let account: MastodonAccount;

  export const pinnedStatuses = (async () => {
    const response = await fetchAPI(
      $session.instance,
      '/api/v1/accounts/' + account.id + '/statuses?pinned=true'
    );

    const statuses = [];
    for (const statusObj of await response.json()) {
      statuses.push(statusObj as MastodonStatus);
    }
    statuses.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());

    return statuses;
  })();
</script>

<div class="profile">
  <AccountProfile {account} />
</div>
<div class="statuses">
  {#await pinnedStatuses then statuses}
    {#each statuses as status}
      <div class="timeline-status">
        <Status {status} />
      </div>
    {/each}
  {/await}
</div>

<style>
  .profile {
    margin-bottom: 0.5em;
  }

  .timeline-status {
    border-bottom: 1px solid var(--col-fg-2);
  }
</style>
