<script lang="ts">
	import type { Snippet } from "svelte";
	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/language-colors";
	import SearchTabs from "./SearchTabs.svelte";

	const LANGUAGES = [
		"Go",
		"JavaScript",
		"TypeScript",
		"Python",
		"Rust",
		"OCaml",
		"Haskell",
		"C",
		"C++",
		"Ruby",
		"Swift"
	];

	interface Props {
		query: string;
		active: string;
		/** tab-specific result metadata, rendered under the filters */
		children?: Snippet;
	}

	let { query = $bindable(), active, children }: Props = $props();

	const addLang = (lang: string) => {
		const token = `lang:${lang}`;
		if (!query.split(/\s+/).includes(token)) query = `${token} ${query}`.trim();
	};
	const langColor = (lang: string) => LANGUAGE_COLORS[lang] ?? LANGUAGE_COLOR_FALLBACK;
</script>

<div class="col-span-1 hidden md:sticky md:top-2 md:block md:self-start">
	<div class="flex flex-col gap-6 px-2 md:px-0">
		<div>
			<h3 class="mb-3 text-sm font-semibold text-foreground-muted">Filter by</h3>
			<SearchTabs {query} {active} />
		</div>

		<div>
			<h3 class="mb-3 text-sm font-semibold text-foreground-muted">Languages</h3>
			<div class="flex flex-wrap gap-2">
				{#each LANGUAGES as lang (lang)}
					<button
						type="button"
						onclick={() => addLang(lang)}
						class="flex w-fit shrink-0 items-center gap-2 rounded border border-border-default bg-background-default px-2 py-1 text-sm text-foreground-default transition-colors hover:bg-background-subtle"
					>
						<span
							class="inline-block size-2.5 shrink-0 rounded-full"
							style={`background-color: ${langColor(lang)}`}
						></span>
						<span>{lang}</span>
					</button>
				{/each}
			</div>
			<p class="mt-3 text-xs text-foreground-subtle">
				Click a language to add it to your query, then search. You can also type
				<code class="rounded bg-background-inset px-1 py-0.5 text-xs">lang:name</code>
				into the search bar yourself.
			</p>
		</div>

		{@render children?.()}
	</div>
</div>
