<script lang="ts">
	import type { Snippet } from "svelte";
	import ArrowRight from "$icon/arrow-right";
	import Eye from "$icon/eye";
	import type { SvelteMap } from "svelte/reactivity";
	import Button from "#lib/components/ui/Button.svelte";
	import DiffStatPill from "#lib/components/repo/DiffStatPill.svelte";
	import FileCardHeader from "#lib/components/repo/FileCardHeader.svelte";
	import type { CodeViewFile } from "#lib/components/repo/DiffCodeView.svelte";

	interface Props {
		file: CodeViewFile;
		openState: SvelteMap<string, boolean>;
		noteState?: SvelteMap<string, string>;
		note?: string;
		blobUrl?: string;
		headerActions?: Snippet<[string]>;
		onToggle?: () => void;
	}

	let { file, openState, noteState, note, blobUrl, headerActions, onToggle }: Props = $props();

	const open = $derived(openState.get(file.key) ?? true);
	const empty = $derived(file.stat.insertions === 0 && file.stat.deletions === 0);
	const renamed = $derived(
		file.oldName != null && file.oldName !== "" && file.oldName !== file.name
	);
	const liveNote = $derived(
		note ?? noteState?.get(file.key) ?? (empty ? "no changes to the file itself" : undefined)
	);
</script>

{#snippet path(name: string)}
	{@const cut = name.lastIndexOf("/")}
	<span
		data-testid="diffFileName"
		data-path={name}
		class="flex min-w-0 flex-1 items-center overflow-hidden"
	>
		<span class="min-w-0 truncate">{cut === -1 ? name : name.slice(0, cut)}</span>
		{#if cut !== -1}
			<span class="shrink-0">{name.slice(cut)}</span>
		{/if}
	</span>
{/snippet}

<FileCardHeader {open} collapsible={!empty && onToggle != null} spacer={empty} {onToggle}>
	{#snippet title()}
		<DiffStatPill stat={file.stat} size="small" class="shrink-0" />
		<div class="flex min-w-0 items-center gap-xs">
			{#if renamed}
				{@render path(file.oldName ?? "")}
				<ArrowRight class="size-3.5 shrink-0" />
				{@render path(file.name)}
			{:else}
				{@render path(file.name)}
			{/if}
		</div>
		{#if liveNote}
			<span
				class="shrink-0 typography-paragraph-small whitespace-nowrap text-foreground-muted"
				>{liveNote}</span
			>
		{/if}
	{/snippet}

	{#snippet actions()}
		{#if blobUrl}
			<Button
				href={blobUrl as "/"}
				variant="ghost"
				size="small"
				icon={Eye}
				class="hidden md:inline-flex"
			>
				View file
			</Button>
		{/if}
		{@render headerActions?.(file.key)}
	{/snippet}
</FileCardHeader>