<script lang="ts">
	import RepoCard from "#lib/components/repo/RepoCard.svelte";
	import TimelineGroup from "#lib/components/timeline/TimelineGroup.svelte";
	import TimelineActorHeader from "#lib/components/timeline/TimelineActorHeader.svelte";
	import { toRepoCard, repoHref, repoOwner } from "#lib/components/timeline/mappers.ts";
	import type { TimelineEvent } from "#lib/components/timeline/group.ts";
	import type * as OrgTangledActorDefs from "#lib/api/lexicons/types/org/tangled/actor/defs.ts";
	import type { RepoEvent } from "#lib/api/lexicons/types/org/tangled/feed/getTimeline.ts";

	let {
		actor,
		items,
		signedIn = false
	}: {
		actor: OrgTangledActorDefs.ProfileViewBasic;
		items: TimelineEvent<RepoEvent>[];
		signedIn?: boolean;
	} = $props();

	const first = $derived(items[0].event);
</script>

{#snippet forkTarget()}
	<span>to</span>
	<a
		href={repoHref(first.repo)}
		title={first.repo.slug}
		class="max-w-1/2 min-w-0 truncate text-foreground-default hover:underline"
		>{first.repo.slug}</a
	>
{/snippet}

<TimelineGroup {items} trailing={first.source && items.length === 1 ? forkTarget : undefined}>
	{#snippet title()}
		<TimelineActorHeader
			{actor}
			verb={first.source ? "forked" : "created"}
			count={items.length}
			plural="repositories"
		>
			{#if first.source}
				<a
					href={repoHref(first.source)}
					title="{repoOwner(first.source)}/{first.source.slug}"
					class="max-w-1/2 min-w-0 truncate text-foreground-default hover:underline"
					>{repoOwner(first.source)}/{first.source.slug}</a
				>
			{:else}
				<a
					href={repoHref(first.repo)}
					title={first.repo.slug}
					class="max-w-1/2 min-w-0 truncate text-foreground-default hover:underline"
					>{first.repo.slug}</a
				>
			{/if}
		</TimelineActorHeader>
	{/snippet}
	{#snippet row(event)}
		<RepoCard
			repo={toRepoCard(event.repo)}
			starButton={signedIn}
			border={false}
			background={false}
			padding="none"
			class="flex min-h-24 flex-col"
		/>
	{/snippet}
</TimelineGroup>