<script lang="ts">
	import { page } from '$app/stores';

	import Boring from 'svelte-boring-avatars';

	import Award from 'lucide-svelte/icons/award';
	import Code from 'lucide-svelte/icons/code';
	import GitBranch from 'lucide-svelte/icons/git-branch';
	import LifeBuoy from 'lucide-svelte/icons/life-buoy';
	import LogOut from 'lucide-svelte/icons/log-out';
	import RectangleEllipsis from 'lucide-svelte/icons/rectangle-ellipsis';
	import ScrollText from 'lucide-svelte/icons/scroll-text';
	import Settings from 'lucide-svelte/icons/settings';
	import Shield from 'lucide-svelte/icons/shield';

	import * as Avatar from '$lib/components/ui/avatar';
	import { Button } from '$lib/components/ui/button';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger asChild let:builder>
		<Button builders={[builder]} variant="plain" size="icon">
			<Avatar.Root>
				<Avatar.Image
					src="data:image;base64,{$page.data.user?.avatar}"
					alt={$page.data.user?.pseudo}
				/>
				<Avatar.Fallback>
					<Boring name={$page.data.user?.pseudo} variant="beam" />
				</Avatar.Fallback>
			</Avatar.Root>
			<span class="sr-only">Menu utilisateur</span>
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56">
		<DropdownMenu.Label
			>Salutation, <span class="text-primary">{$page.data.user?.pseudo}</span></DropdownMenu.Label
		>
		{#if $page.data.user?.email.endsWith('@peerat.dev')}
			<DropdownMenu.Separator />
			<DropdownMenu.Sub>
				<DropdownMenu.SubTrigger>
					<Shield class="mr-2 h-4 w-4" />
					<span>Administration</span>
				</DropdownMenu.SubTrigger>
				<DropdownMenu.SubContent>
					<DropdownMenu.Item href="/admin/logs">
						<ScrollText class="mr-2 h-4 w-4" />
						<span>Logs</span>
					</DropdownMenu.Item>
					<DropdownMenu.Item href="/admin/puzzles">
						<Code class="mr-2 h-4 w-4" />
						<span>Puzzles</span>
					</DropdownMenu.Item>
				</DropdownMenu.SubContent>
			</DropdownMenu.Sub>
		{/if}
		<DropdownMenu.Separator />
		<DropdownMenu.Item href="/settings">
			<Settings class="mr-2 h-4 w-4" />
			<span>Paramètres</span>
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item href="/badges">
			<Award class="mr-2 h-4 w-4" />
			<span>Mes badges</span>
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item href="/git" target="_blank">
			<GitBranch class="mr-2 h-4 w-4" />
			<span>Git</span>
		</DropdownMenu.Item>
		<DropdownMenu.Item href="/discord" target="_blank">
			<LifeBuoy class="mr-2 h-4 w-4" />
			<span>Discord</span>
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item href="/logout" class="text-destructive data-[highlighted]:bg-destructive">
			<LogOut class="mr-2 h-4 w-4" />
			Se déconnecter
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>
