<script setup lang="ts">
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import Badge from "@/components/ui/badge/Badge.vue";
import { computed, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import { useRouter } from 'vue-router';
import { Ellipsis } from "lucide-vue-next";
import Input from "@/components/ui/input/Input.vue";
import LoaForm from "@/components/loa/loaForm.vue";

const members = ref<Member[]>([]);
const router = useRouter();

const fetchMembers = async () => {
    members.value = await getMembers();
};

function viewMember(id) {
    router.push(`/member/${id}`)
}

fetchMembers();

const searchVal = ref<string>("");
const searchedMembers = computed(() => {
    return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
});

</script>

<template>

    <!-- table menu -->
    <div class="w-4xl mx-auto">
        <div class="flex justify-between mb-4">
            <Input v-model="searchVal" placeholder="search..."></Input>
        </div>
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead class="w-[100px]">
                        Member
                    </TableHead>
                    <TableHead>Rank</TableHead>
                    <TableHead>Unit</TableHead>
                    <TableHead>Status</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow v-for="member in searchedMembers" :key="member.member_id"
                    :onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
                    <TableCell class="font-medium">
                        {{ member.member_name }}
                    </TableCell>
                    <TableCell>{{ member.rank }}</TableCell>
                    <TableCell>{{ member.unit }}</TableCell>
                    <TableCell>{{ member.status }}</TableCell>
                    <TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
                    <TableCell @click.stop="" class="text-right">
                        <DropdownMenu>
                            <DropdownMenuTrigger class="cursor-pointer">
                                <Ellipsis></Ellipsis>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent>
                                <DropdownMenuItem>Change Rank</DropdownMenuItem>
                                <DropdownMenuItem>Transfer</DropdownMenuItem>
                                <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </TableCell>
                </TableRow>
            </TableBody>
        </Table>
    </div>
</template>