<script setup lang="ts">
import { router, usePage } from '@inertiajs/vue3';
import { LogOut, User } from '@lucide/vue';
import { computed } from 'vue';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator, DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
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('/auth/logout');
}
</script>

<template>
    <DropdownMenu v-if="user">
        <DropdownMenuTrigger as-child>
            <Button variant="ghost" class="relative size-8 rounded-full">
                <Avatar class="size-8">
                    <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-muted-foreground text-xs leading-none">
                        {{ user.email }}
                    </p>
                </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem @click="router.visit('/admin/setting/profile')">
                <User />
                Profil
            </DropdownMenuItem>
            <Separator />
            <DropdownMenuItem variant="destructive" @click="logout">
                <LogOut />
                Keluar
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</template>
