<script lang="ts">
	import { resolve } from '$app/paths';
	import * as Avatar from '$lib/components/ui/avatar/index.js';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
	import { logout } from '$lib/api';
	import { goto } from '$app/navigation';
	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
	import SettingsIcon from '@lucide/svelte/icons/settings';
	import PaletteIcon from '@lucide/svelte/icons/palette';
	import LogOutIcon from '@lucide/svelte/icons/log-out';

	let { user }: { user: { email: string } } = $props();

	const sidebar = useSidebar();

	// No display name on the account yet, so the local part of the address
	// stands in for one and its first two letters make the avatar.
	const handle = $derived(user?.email?.split('@')[0] ?? 'Account');
	const initials = $derived(handle.slice(0, 2).toUpperCase());
</script>

<Sidebar.Menu>
	<Sidebar.MenuItem>
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>
				{#snippet child({ props })}
					<Sidebar.MenuButton
						{...props}
						size="lg"
						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
					>
						<Avatar.Root class="size-8 rounded-lg">
							<Avatar.Fallback
								class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
							>
								{initials}
							</Avatar.Fallback>
						</Avatar.Root>
						<div class="grid flex-1 text-left text-sm leading-tight">
							<span class="truncate font-semibold">{handle}</span>
							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span
							>
						</div>
						<ChevronsUpDownIcon class="ml-auto size-4" />
					</Sidebar.MenuButton>
				{/snippet}
			</DropdownMenu.Trigger>

			<DropdownMenu.Content
				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
				side={sidebar.isMobile ? 'bottom' : 'right'}
				align="end"
				sideOffset={4}
			>
				<DropdownMenu.Label class="p-0 font-normal">
					<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
						<Avatar.Root class="size-8 rounded-lg">
							<Avatar.Fallback
								class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
							>
								{initials}
							</Avatar.Fallback>
						</Avatar.Root>
						<div class="grid flex-1 text-left text-sm leading-tight">
							<span class="truncate font-semibold">{handle}</span>
							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span
							>
						</div>
					</div>
				</DropdownMenu.Label>

				<DropdownMenu.Separator />

				<DropdownMenu.Group>
					<DropdownMenu.Item onSelect={() => goto(resolve('/settings/account'))}>
						<SettingsIcon class="size-4" />
						Settings
					</DropdownMenu.Item>
					<DropdownMenu.Item onSelect={() => goto(resolve('/settings/appearance'))}>
						<PaletteIcon class="size-4" />
						Appearance
					</DropdownMenu.Item>
				</DropdownMenu.Group>

				<DropdownMenu.Separator />

				<DropdownMenu.Item
					onSelect={async () => {
						await logout();
						await goto(resolve('/login'));
					}}
				>
					<LogOutIcon class="size-4" />
					Log out
				</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Root>
	</Sidebar.MenuItem>
</Sidebar.Menu>
