<script lang="ts">
	import ShieldCheck from "$icon/shield-check";
	import type { VerifiedSignature } from "#lib/components/repo/commitSignature.ts";
	import CopyButton from "#lib/components/ui/CopyButton.svelte";
	import Tooltip from "#lib/components/ui/Tooltip.svelte";
	import RevId from "#lib/components/repo/RevId.svelte";
	import { shiftKey } from "#lib/shiftKey.svelte.ts";

	interface Props {
		hash: string;
		shortHash: string;
		changeId?: string;
		changeIds?: string[];
		signature?: VerifiedSignature;
		full?: boolean;
	}

	let { hash, shortHash, changeId, changeIds = [], signature, full = false }: Props = $props();

	const shortChangeId = $derived(shiftKey.held ? changeId?.slice(0, 8) : undefined);
	const target = $derived(shortChangeId ? "change ID" : "SHA");
</script>

{#snippet signed()}
	<span class="flex flex-col gap-2xs">
		<span class="font-medium">Verified signature</span>
		{#if signature?.committer}
			<span>Signed by {signature.committer}</span>
		{/if}
		{#if signature?.fingerprint}
			<span class="typography-monospace-small break-all opacity-80"
				>{signature.fingerprint}</span
			>
		{/if}
		<span class="opacity-80">Click to copy {target}</span>
	</span>
{/snippet}

<Tooltip content={signature ? signed : `Copy ${target}`}>
	<CopyButton
		value={shortChangeId && changeId ? changeId : hash}
		aria-label={shortChangeId
			? `Copy change ID ${shortChangeId}`
			: `Copy SHA ${shortHash}${signature ? ", verified signature" : ""}`}
		class={signature
			? "min-h-5 bg-background-success-subtle py-0 typography-monospace-small text-foreground-success-strong hover:bg-background-success-subtle-hover"
			: "typography-monospace-small"}
	>
		<span class="flex items-center gap-2xs">
			{#if signature}
				<ShieldCheck class="size-3.5 shrink-0" aria-hidden="true" />
			{/if}
			{#if shortChangeId && changeId}
				<RevId id={changeId} kind="change-id" ids={changeIds} />
			{:else if full}
				<span class={["sm:hidden", shiftKey.held && "text-foreground-subtle"]}
					>{shortHash}</span
				>
				<span class={["hidden sm:inline", shiftKey.held && "text-foreground-subtle"]}
					>{hash}</span
				>
			{:else}
				<span class={[shiftKey.held && "text-foreground-subtle"]}>{shortHash}</span>
			{/if}
		</span>
	</CopyButton>
</Tooltip>