<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 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 flex h-8 w-full items-center md:order-none md:w-64"
		method="GET"
		action={resolve(`${base}/search` as "/")}
	>
		<div class="relative flex h-full w-full items-center">
			<SearchCode
				class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
				aria-hidden="true"
			/>
			<input
				class="h-full w-full rounded border border-border-default bg-background-default py-1 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
				type="text"
				name="q"
				placeholder="Find files or code..."
				aria-label="Search this repository"
			/>
		</div>
	</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>
