<script lang="ts">
	import { page } from "$app/state";
	import { setContext } from "svelte";
	import { createProfileCounts, PROFILE_COUNTS_KEY } from "$lib/components/profile/counts.svelte";
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
	import TabPanel from "$lib/components/ui/TabPanel.svelte";

	let { children, data } = $props();

	const profileCounts = createProfileCounts(
		() => data.identity.did,
		() => data.counts
	);
	setContext(PROFILE_COUNTS_KEY, profileCounts);
	const counts = $derived(profileCounts.value);
	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
	const activeTab = $derived(
		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
	);
</script>

<svelte:head>
	<title>{data.identity.handle} &middot; Tangled</title>
</svelte:head>

<section class="mx-auto w-full max-w-screen-lg py-6">
	{#if data.notJoined}
		<EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
	{:else}
		<ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
		<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
			<aside class="p-6 md:col-span-3 md:p-0">
				<ProfileCard
					identity={data.identity}
					profile={data.profile}
					followers={counts.followers}
					following={counts.following}
					viewerFollowRkey={data.viewerFollowRkey}
				/>
			</aside>
			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
				{@render children()}
			</div>
		</TabPanel>
	{/if}
</section>
