<script lang="ts">
	import EmptyState from "#lib/components/ui/EmptyState.svelte";
	import Pagination from "#lib/components/ui/Pagination.svelte";
	import type { CommitStatuses } from "#lib/api/commitStatuses.ts";
	import CommitRows from "#lib/components/repo/CommitRows.svelte";
	import CommitRow from "#lib/components/repo/CommitRow.svelte";
	import type { CommitSummary } from "#lib/components/repo/types.ts";
	import Card from "#lib/components/ui/Card.svelte";
	import GitCommitVertical from "$icon/git-commit-vertical";

	interface Props {
		ownerHandle: string;
		repoName: string;
		ref: string;
		commits: CommitSummary[];
		tagsByCommit?: Record<string, string[]> | Promise<Record<string, string[]>>;
		pipelineStatuses?: Promise<CommitStatuses>;
		hasCi?: boolean;
		page: number;
		pageCount: number;
		onPageChange?: (page: number) => void;
	}

	let {
		ownerHandle,
		repoName,
		ref,
		commits,
		tagsByCommit,
		pipelineStatuses,
		hasCi = false,
		page,
		pageCount,
		onPageChange
	}: Props = $props();

	const changeIds = $derived(commits.flatMap(({ changeId }) => (changeId ? [changeId] : [])));
</script>

<Card padding="none">
	{#if commits.length === 0}
		<EmptyState size="inline" message="No commits at {ref}." class="justify-center py-xl" />
	{:else}
		<h2
			class="flex flex-wrap items-center gap-xs p-md typography-paragraph-regular font-medium"
		>
			<GitCommitVertical class="size-3.5 shrink-0" aria-hidden="true" />
			Commits on
			<span
				class="flex min-w-0 rounded-md bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default"
				>{ref}</span
			>
		</h2>

		<CommitRows class="divide-y divide-border-default border-t border-border-default">
			{#each commits as commit (commit.hash)}
				<CommitRow
					{ownerHandle}
					{repoName}
					{commit}
					{changeIds}
					{tagsByCommit}
					{pipelineStatuses}
					{hasCi}
				/>
			{/each}
		</CommitRows>
	{/if}
</Card>

{#if pageCount > 1}
	<div class="mt-md flex justify-center">
		<Pagination {page} total={pageCount} labels onchange={onPageChange} />
	</div>
{/if}