<script lang="ts">
	import { resolve } from "$app/paths";
	import GitBranch from "$icon/git-branch";
	import GitCommitHorizontal from "$icon/git-commit-horizontal";
	import SearchCode from "$icon/search-code";
	import Tags from "$icon/tags";
	import Input from "$lib/components/ui/Input.svelte";
	import CloneDropdown from "./CloneDropdown.svelte";
	import RefSelector from "./RefSelector.svelte";
	import type { RepoInfo } from "./types";

	interface Props {
		repo: RepoInfo;
		ref: string;
		refs: { branches: string[]; tags: string[] };
		totalCommits: number;
		totalBranches: number;
		totalTags: number;
		bobbinUrl: string;
	}

	let { repo, ref, refs, totalCommits, totalBranches, totalTags, bobbinUrl }: Props = $props();

	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
	const encodedRef = $derived(encodeURIComponent(ref));
</script>

<div class="flex flex-wrap items-center justify-between gap-3 pb-5">
	<RefSelector
		ownerHandle={repo.ownerHandle}
		repoName={repo.name}
		current={ref}
		branches={refs.branches}
		tags={refs.tags}
	/>

	<form
		class="order-last w-full md:order-0 md:w-64"
		method="GET"
		action={resolve(`${base}/search` as "/")}
	>
		<Input
			class="w-full"
			type="text"
			name="q"
			placeholder="Find files or code..."
			aria-label="Search this repository"
			iconLeft={SearchCode}
		/>
	</form>

	<div class="flex items-center gap-3">
		<a
			href={resolve(`${base}/commits/${encodedRef}` as "/")}
			class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
		>
			<GitCommitHorizontal class="size-4" aria-hidden="true" />
			{totalCommits}
		</a>
		<a
			href={resolve(`${base}/branches` as "/")}
			class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
		>
			<GitBranch class="size-4" aria-hidden="true" />
			{totalBranches}
		</a>
		<a
			href={resolve(`${base}/tags` as "/")}
			class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
		>
			<Tags class="size-4" aria-hidden="true" />
			{totalTags}
		</a>
		<CloneDropdown {repo} {ref} {bobbinUrl} />
	</div>
</div>
