<script setup lang="ts">
    import UsingQueryResult from "@/components/UsingQueryResult.vue";
    import { useGroupsQuery } from "@/queries/groups.ts";
    import type { GroupsResponse } from "@/controllers/groups.ts";
    import { useI18n } from "vue-i18n";
    import type { GroupDTO } from "@dwengo-1/common/interfaces/group";

    const { t } = useI18n();

    const props = defineProps<{
        classId: string;
        assignmentNumber: number;
    }>();

    const model = defineModel<number | undefined>({ default: undefined });

    const groupsQuery = useGroupsQuery(props.classId, props.assignmentNumber, true);

    interface GroupSelectorOption {
        groupNumber: number | undefined;
        label: string;
    }

    function groupOptions(groups: GroupDTO[]): GroupSelectorOption[] {
        return [...groups]
            .sort((a, b) => a.groupNumber - b.groupNumber)
            .map((group, index) => ({
                groupNumber: group.groupNumber,
                label: `${index + 1}`,
            }));
    }
</script>

<template>
    <using-query-result
        :query-result="groupsQuery"
        v-slot="{ data }: { data: GroupsResponse }"
    >
        <v-select
            :label="t('viewAsGroup')"
            :items="groupOptions(data.groups)"
            v-model="model"
            item-title="label"
            class="group-selector-cb"
            variant="outlined"
            clearable
        ></v-select>
    </using-query-result>
</template>

<style scoped>
    .group-selector-cb {
        margin-top: 10px;
    }
</style>
