<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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { getRanks, Rank, submitRankChange } from "@/api/rank"
import { onMounted, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import { cn } from "@/lib/utils"
import { CalendarIcon } from "lucide-vue-next"

import {
    DateFormatter,

    DateValue,

    getLocalTimeZone,
    today,
} from "@internationalized/date"

import Button from "@/components/ui/button/Button.vue";
import Calendar from "@/components/ui/calendar/Calendar.vue";

const members = ref<Member[]>([])
const ranks = ref<Rank[]>([])
const date = ref<DateValue>(today(getLocalTimeZone()))


const currentMember = ref<Member | null>(null);
const currentRank = ref<Rank | null>(null);
onMounted(async () => {
    members.value = await getMembers();
    ranks.value = await getRanks();
});

const df = new DateFormatter("en-US", {
    dateStyle: "long",
})

function submit() {
    submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
        .then(() => {
            alert("Rank change submitted!");
            currentMember.value = null;
            currentRank.value = null;
            date.value = today(getLocalTimeZone());
        })
        .catch((err) => {
            console.error(err);
            alert("Failed to submit rank change.");
        });
}

</script>

<template>
    <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
        <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>

        <!-- Rank Combobox -->
        <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 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>
        <Popover>
            <PopoverTrigger as-child>
                <Button variant="outline" :class="cn(
                    'w-[280px] justify-start text-left font-normal',
                    !date && 'text-muted-foreground',
                )">
                    <CalendarIcon class="mr-2 h-4 w-4" />
                    {{ date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date" }}
                </Button>
            </PopoverTrigger>
            <PopoverContent class="w-auto p-0">
                <Calendar v-model="date" initial-focus />
            </PopoverContent>
        </Popover>
        <Button @click="submit">Submit</Button>
    </div>
</template>