<script setup lang="ts">
import {ref, defineProps, defineEmits} from 'vue';
import {useI18n} from 'vue-i18n';
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type {StudentsResponse} from "@/controllers/students.ts";
import {useClassStudentsQuery} from "@/queries/classes.ts";

const props = defineProps<{
    classId: string | undefined
    groups: string[][],
}>();
const emit = defineEmits(['groupCreated']);
const {t} = useI18n();

const selectedStudents = ref([]);

const studentQueryResult = useClassStudentsQuery(() => props.classId, true);

function filterStudents(data: StudentsResponse): { title: string, value: string }[] {
    const students = data.students;
    const studentsInGroups = props.groups.flat();

    return students
        ?.map(st => ({
            title: `${st.firstName} ${st.lastName}`,
            value: st.username,
        }))
        .filter(student => !studentsInGroups.includes(student.value));
}


function createGroup(): void {
    if (selectedStudents.value.length) {
        // Extract only usernames (student.value)
        const usernames = selectedStudents.value.map(student => student.value);
        emit('groupCreated', usernames);
        selectedStudents.value = []; // Reset selection after creating group
    }
};
</script>


<template>
    <using-query-result
        :query-result="studentQueryResult"
        v-slot="{ data }: { data: StudentsResponse }"
    >
        <h3>{{ t('create-groups') }}</h3>
        <v-card-text>
            <v-combobox
                v-model="selectedStudents"
                :items="filterStudents(data)"
                item-title="title"
                item-value="value"
                :label="t('choose-students')"
                variant="outlined"
                clearable
                multiple
                hide-details
                density="compact"
                chips
                append-inner-icon="mdi-magnify"
            ></v-combobox>

            <v-btn @click="createGroup" color="primary" class="mt-2" size="small">
                {{ t('create-group') }}
            </v-btn>
        </v-card-text>
    </using-query-result>

</template>

<style scoped>

</style>
