<script setup lang="ts">
import Badge from '@/components/ui/badge/Badge.vue';
import Button from '@/components/ui/button/Button.vue';
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from '@/components/ui/card'
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog'
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"

import { onMounted, ref } from 'vue';
import { getRanks } from '@/api/rank';

const setRankDialog = ref(false);
const rankOnTransfer = ref();
const ranks = ref(null);

onMounted(async () => {
    ranks.value = await getRanks();
});
</script>
<template>
    <Dialog :open="setRankDialog" @update:open="setRankDialog = false">
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Set Rank on Transfer</DialogTitle>
                <DialogDescription>
                    Assign MEMBER a rank on transfer completion.
                </DialogDescription>
            </DialogHeader>
            <!-- Rank Combobox -->
            <Combobox v-model="rankOnTransfer">
                <ComboboxAnchor class="w-[300px]">
                    <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
                        :display-value="(v) => v ? v.short_name : ''" />
                </ComboboxAnchor>
                <ComboboxList class="w-[300px]">
                    <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
                    <ComboboxGroup>
                        <template v-for="rank in ranks" :key="rank.id">
                            <ComboboxItem :value="rank"
                                class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
                                {{ rank.short_name }}
                                <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
                                    <Check class="h-4 w-4" />
                                </ComboboxItemIndicator>
                            </ComboboxItem>
                        </template>
                    </ComboboxGroup>
                </ComboboxList>
            </Combobox>
            <DialogFooter>
                <Button variant="outline" @click="setRankDialog = false">Cancel</Button>
                <Button>Confirm</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>

    <div class="max-w-5xl w-full mx-auto">
        Active
        <div>
            <Card>
                <CardHeader>
                    <CardTitle class="flex justify-between">
                        <div class="flex items-center gap-3">
                            <Badge class="">Pending</Badge>
                            <p>Name</p>
                        </div>
                        <div class="text-muted-foreground font-normal flex gap-2">
                            Transfer To: <p class="text-white">Company</p>
                        </div>
                    </CardTitle>
                    <CardDescription class="flex gap-2">Approved by: <p class="text-white">Someone, Someone?</p>
                    </CardDescription>
                    <CardDescription class="flex gap-2">Rank on transfer: <p class="text-white">Rank</p>
                    </CardDescription>
                </CardHeader>
                <!-- <CardContent>
                    Card Content
                </CardContent> -->
                <CardFooter class="flex justify-between">
                    <p class="text-muted-foreground">Request Date:</p>
                    <div class="flex gap-4">
                        <Button variant="success">Approve</Button>
                        <Button variant="destructive">Deny</Button>
                    </div>
                </CardFooter>
            </Card>
        </div>
        <div>
            Inactive
        </div>
    </div>
</template>