<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/profile/EmptyState.svelte';
	import ProfileCard from '$lib/components/profile/ProfileCard.svelte';
	import ProfileTabs from '$lib/components/profile/ProfileTabs.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} />
		<div class="grid rounded bg-surface shadow-sm 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 p-6 md:col-span-8 md:border-t-0 md:p-0">
				{@render children()}
			</div>
		</div>
	{/if}
</section>
