<script lang="ts">
	import { dev } from "$app/env";
	import { page } from "$app/state";
	import SquareChartGantt from "$icon/square-chart-gantt";
	import BookMarked from "$icon/book-marked";
	import Star from "$icon/star";
	import LineSquiggle from "$icon/line-squiggle";
	import Shield from "$icon/shield";
	import Settings from "$icon/settings";
	import Tabs, { type TabDef } from "#lib/components/ui/Tabs.svelte";
	import type { ProfileCounts } from "#lib/components/profile/types.ts";

	interface Props {
		actor: string;
		active: string;
		counts: ProfileCounts;
		organization?: boolean;
		settings?: boolean;
		layered?: boolean;
	}

	let {
		actor,
		active,
		counts,
		organization = false,
		settings = false,
		layered = false
	}: Props = $props();

	const hrefFor = (id: string) => {
		const query = new URLSearchParams([
			...(id === "overview" ? [] : [["tab", id]]),
			...(dev && page.url.searchParams.get("preview") === "organization"
				? [["preview", "organization"]]
				: [])
		]).toString();
		return `/${actor}${query ? `?${query}` : ""}`;
	};

	const tabs = $derived<TabDef[]>(
		organization
			? [
					{
						id: "overview",
						label: "Overview",
						icon: SquareChartGantt,
						href: hrefFor("overview")
					},
					{
						id: "repos",
						label: "Repositories",
						icon: BookMarked,
						count: counts.repos,
						href: hrefFor("repos")
					},
					...(settings
						? [
								{
									id: "settings",
									label: "Settings",
									icon: Settings,
									href: hrefFor("settings")
								}
							]
						: [])
				]
			: [
					{
						id: "overview",
						label: "Overview",
						icon: SquareChartGantt,
						href: hrefFor("overview")
					},
					{
						id: "repos",
						label: "Repositories",
						icon: BookMarked,
						count: counts.repos,
						href: hrefFor("repos")
					},
					{
						id: "starred",
						label: "Starred",
						icon: Star,
						count: counts.stars,
						href: hrefFor("starred")
					},
					{
						id: "strings",
						label: "Strings",
						icon: LineSquiggle,
						count: counts.strings,
						href: hrefFor("strings")
					},
					{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
				]
	);
</script>

<Tabs {tabs} {active} {layered} label="profile sections" />