<script lang="ts">
	import { resolve } from "$app/paths";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import User from "$lib/components/ui/User.svelte";
	import PullStatePill, { type PullStatePillVariants } from "./PullStatePill.svelte";

	interface Props {
		state: PullStatePillVariants["state"];
		authorHandle: string;
		authorDid: string;
		// absent on the mock loader for now, the separator hides with it
		createdAt?: string;
		ownerHandle: string;
		repoName: string;
		targetBranch: string;
		// missing on patch-based pulls, which have no branch to point at
		sourceBranch?: string;
		// set only when the source branch lives in a fork, as `owner/repo` or a did
		sourceRepo?: string;
	}

	let {
		state,
		authorHandle,
		authorDid,
		createdAt,
		ownerHandle,
		repoName,
		targetBranch,
		sourceBranch,
		sourceRepo
	}: Props = $props();

	const treeHref = (repo: string, ref: string) =>
		resolve(`/${repo}/tree/${encodeURIComponent(ref)}` as "/");
	const target = $derived(`${ownerHandle}/${repoName}`);
	const chip =
		"inline-flex items-center gap-0.5 rounded-sm bg-background-inset px-2 typography-monospace-small";
</script>

<div
	class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-subtle"
>
	<PullStatePill {state} />

	<span class="ml-1 flex items-center gap-1">
		opened by
		<User handle={authorHandle} did={authorDid} />
	</span>

	{#if createdAt}
		<span class="before:mr-1 before:content-['·']">
			<TimeAgo value={createdAt} />
		</span>
	{/if}

	<span class="flex items-center gap-1 before:mr-1 before:content-['·']">
		targeting
		<span class={chip}>
			<a href={treeHref(target, targetBranch)} class="no-underline hover:underline"
				>{targetBranch}</a
			>
		</span>
	</span>

	{#if sourceBranch}
		<span class="flex items-center gap-1">
			from
			<span class={chip}>
				{#if sourceRepo}
					<a href={resolve(`/${sourceRepo}` as "/")} class="no-underline hover:underline">fork</a>:
				{/if}
				<a href={treeHref(sourceRepo ?? target, sourceBranch)} class="no-underline hover:underline"
					>{sourceBranch}</a
				>
			</span>
		</span>
	{/if}
</div>
