<script setup lang="ts">
import { router, usePage } from '@inertiajs/vue3';
import { Bell, BellOff, 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 { usePushNotification } from '@/composables/usePushNotification';
import Separator from './ui/separator/Separator.vue';
import { logout as logoutRoute } from '@/routes';
import { profile } from '@/routes/admin/account';

const page = usePage();

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

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

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

const { isSupported, isSubscribed, isLoading, toggle } = usePushNotification();

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

<template>
    <div class="flex items-center gap-2">
        <Button
            v-if="isSupported"
            :disabled="isLoading"
            :title="isSubscribed ? 'Matikan notifikasi' : 'Aktifkan notifikasi'"
            class="relative size-8 transition-all"
            variant="ghost"
            @click="toggle"
        >
            <BellOff v-if="isSubscribed" class="size-4 text-muted-foreground" />
            <Bell v-else class="size-4" />
            <span
                v-if="isSubscribed"
                class="absolute top-1 right-1 size-2 rounded-full bg-emerald-500 ring-1 ring-background"
            />
        </Button>

        <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(profile.url())">
                    <User />
                    Profil
                </DropdownMenuItem>
                <Separator />
                <DropdownMenuItem variant="destructive" @click="logout">
                    <LogOut />
                    Keluar
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </div>
</template>
