<script setup lang="ts">
import { router, usePage } from '@inertiajs/vue3';
import { LogOut, User } from '@lucide/vue';
import { computed } from 'vue';
import NotificationBell from '@/components/NotificationBell.vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { logout as logoutRoute } from '@/routes';
import { profile } from '@/routes/admin/account';
import Separator from './ui/separator/Separator.vue';

const page = usePage();

const user = computed(() => page.props.auth.user);

const initials = computed(() => {
    const username = user.value?.username ?? '';

    return username.slice(0, 2).toUpperCase();
});

function logout() {
    router.post(logoutRoute.url());
}
</script>

<template>
    <div class="flex items-center gap-2">
        <NotificationBell />
        <DropdownMenu v-if="user">
            <DropdownMenuTrigger as-child>
                <Button variant="ghost" class="relative size-8 rounded-full">
                    <Avatar class="size-8">
                        <AvatarImage v-if="user.profile_photo_url" :src="user.profile_photo_url" :alt="user.username" />
                        <AvatarFallback>{{ initials }}</AvatarFallback>
                    </Avatar>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent class="w-56" align="end">
                <DropdownMenuLabel class="font-normal">
                    <div class="flex flex-col space-y-1">
                        <p class="text-sm leading-none font-medium">
                            {{ user.username }}
                        </p>
                        <p class="text-xs leading-none text-muted-foreground">
                            {{ user.email }}
                        </p>
                    </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem @click="router.visit(profile.url())">
                    <User />
                    Profil
                </DropdownMenuItem>
                <Separator />
                <DropdownMenuItem variant="destructive" @click="logout">
                    <LogOut />
                    Keluar
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </div>
</template>
