<script lang="ts">
	import BadgeCheck from '@lucide/svelte/icons/badge-check';
	import Bell from '@lucide/svelte/icons/bell';
	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
	import CreditCard from '@lucide/svelte/icons/credit-card';
	import LogOut from '@lucide/svelte/icons/log-out';
	import Sparkles from '@lucide/svelte/icons/sparkles';

	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 {getContext} from 'svelte';
	import UserDetails from './user-details.svelte';
	import type {User} from '$lib/types';
	import UserRound from '@lucide/svelte/icons/user-round';
	import {base} from '$app/paths';
	import {env} from "$env/dynamic/public";
	import {goto} from '$app/navigation';
	import {handleLogout} from '$lib/utils.ts';
	const user: () => User = getContext('user');
	const sidebar = useSidebar();

</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="h-8 w-8 rounded-lg">
							<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
							<Avatar.Fallback class="rounded-lg">
								<UserRound/>
							</Avatar.Fallback>
						</Avatar.Root>
						<div class="grid flex-1 text-left text-sm leading-tight">
							<UserDetails/>
						</div>
						<ChevronsUpDown class="ml-auto size-4"/>
					</Sidebar.MenuButton>
				{/snippet}
			</DropdownMenu.Trigger>
			<DropdownMenu.Content
					align="end"
					class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
					side={sidebar.isMobile ? 'bottom' : 'right'}
					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="h-8 w-8 rounded-lg">
							<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
							<Avatar.Fallback class="rounded-lg">
								<UserRound/>
							</Avatar.Fallback>
						</Avatar.Root>
						<div class="grid flex-1 text-left text-sm leading-tight">
							<UserDetails/>
						</div>
					</div>
				</DropdownMenu.Label>
				<DropdownMenu.Separator/>
				<DropdownMenu.Group>
					<DropdownMenu.Item>
						<Sparkles/>
						Upgrade to Pro
					</DropdownMenu.Item>
				</DropdownMenu.Group>
				<DropdownMenu.Separator/>
				<DropdownMenu.Group>
					<DropdownMenu.Item>
						<BadgeCheck/>
						Account
					</DropdownMenu.Item>
					<DropdownMenu.Item>
						<CreditCard/>
						Billing
					</DropdownMenu.Item>
					<DropdownMenu.Item>
						<Bell/>
						Notifications
					</DropdownMenu.Item>
				</DropdownMenu.Group>
				<DropdownMenu.Separator/>
				<DropdownMenu.Item onclick={() => handleLogout()}>
					<LogOut/>
					Log out
				</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Root>
	</Sidebar.MenuItem>
</Sidebar.Menu>
