---
import type { ActivityItem } from '../lib/atproto/activity';

interface Props {
  item: ActivityItem;
}
const { item } = Astro.props;
const r = item.record;

interface Presented {
  title: string;
  subtitle?: string;
  snippet?: string;
  url?: string;
}

function present(): Presented {
  switch (item.collection) {
    case 'github.pull_request':
      return {
        title: r.title ?? 'Pull request',
        subtitle: `${r.repoOwner}/${r.repoName} #${r.prNumber}`,
        url: r.url,
      };
    case 'github.pull_request_group': {
      const repo = r.repos?.[0];
      return {
        title: `${r.count} pull requests`,
        subtitle: repo ? `${repo.owner}/${repo.name}` : undefined,
        url: repo?.url,
      };
    }
    case 'pub.leaflet.comment':
      return {
        title: r.parentTitle ? `Comment on “${r.parentTitle}”` : 'Comment',
        snippet: r.plaintext,
        url: r.parentSiteUrl ? `${r.parentSiteUrl}${r.parentPath ?? ''}` : undefined,
      };
    default: {
      const uri = typeof r.uri === 'string' && r.uri.startsWith('http') ? r.uri : undefined;
      return {
        title: r.title ?? r.name ?? r.subject?.title ?? `${item.category} on ${item.appName}`,
        snippet: r.text ?? r.plaintext ?? r.description,
        url: r.url ?? r.link ?? r.permalink ?? uri,
      };
    }
  }
}

const p = present();
const author = item.member;
const name = author.displayName ?? author.handle;
---

<article class="post-card activity-item">
  <div class="post-head">
    {author.avatar && <img class="post-avatar" src={author.avatar} alt="" width="32" height="32" loading="lazy" />}
    <span class="post-name">{name}</span>
    <span class="post-handle">@{author.handle}</span>
    <span class="activity-app">{item.appName}</span>
  </div>

  {
    p.url ? (
      <a class="activity-body" href={p.url} rel="noopener">
        <span class="activity-title">{p.title}</span>
        {p.subtitle && <span class="activity-sub">{p.subtitle}</span>}
      </a>
    ) : (
      <span class="activity-body">
        <span class="activity-title">{p.title}</span>
        {p.subtitle && <span class="activity-sub">{p.subtitle}</span>}
      </span>
    )
  }
  {p.snippet && <p class="activity-snippet">{p.snippet}</p>}
</article>