<script setup lang="ts">
import { Check, Search } from "lucide-vue-next"
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"

import { onMounted, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import Button from "@/components/ui/button/Button.vue";
import { Status, getAllStatuses, assignStatus } from "@/api/status";
import { Rank, getRanks } from "@/api/rank";

const members = ref<Member[]>([])
const statuses = ref<Status[]>([])
const allRanks = ref<Rank[]>([])

const currentMember = ref<Member | null>(null);
const currentStatus = ref<Status | null>(null);
const currentRank = ref<Rank | null>(null);

onMounted(async () => {
    members.value = await getMembers();
    statuses.value = await getAllStatuses();
    allRanks.value = await getRanks();
});

</script>

<template>
    <div class="flex flex-row gap-6 mx-auto m-10 max-w-5xl">
        <Combobox v-model="currentMember">
            <ComboboxAnchor class="w-[300px]">
                <ComboboxInput placeholder="Search members..." class="w-full pl-9"
                    :display-value="(v) => v ? v.member_name : ''" />
            </ComboboxAnchor>
            <ComboboxList class="w-[300px]">
                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
                <ComboboxGroup>
                    <template v-for="member in members" :key="member.member_id">
                        <ComboboxItem :value="member"
                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
                            {{ member.member_name }}
                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
                                <Check class="h-4 w-4" />
                            </ComboboxItemIndicator>
                        </ComboboxItem>
                    </template>
                </ComboboxGroup>
            </ComboboxList>
        </Combobox>

        <!-- Status Combobox -->
        <Combobox v-model="currentStatus">
            <ComboboxAnchor class="w-[300px]">
                <ComboboxInput placeholder="Search statuses..." class="w-full pl-9"
                    :display-value="(v) => v ? v.name : ''" />
            </ComboboxAnchor>
            <ComboboxList class="w-[300px]">
                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
                <ComboboxGroup>
                    <template v-for="status in statuses" :key="status.id">
                        <ComboboxItem :value="status"
                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
                            {{ status.name }}
                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
                                <Check class="h-4 w-4" />
                            </ComboboxItemIndicator>
                        </ComboboxItem>
                    </template>
                </ComboboxGroup>
            </ComboboxList>
        </Combobox>

        <!-- rank -->
        <Combobox v-model="currentRank">
            <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 allRanks" :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>
        <Button :onClick="() => { }">Submit</Button>
    </div>
</template>