<script setup lang="ts">
    import type { SubmissionDTO } from "@dwengo-1/common/interfaces/submission";
    import { computed } from "vue";
    import { useI18n } from "vue-i18n";

    const { t } = useI18n();

    const props = defineProps<{
        allSubmissions: SubmissionDTO[];
    }>();
    const emit = defineEmits<(e: "submission-selected", submission: SubmissionDTO) => void>();

    const headers = computed(() => [
        { title: "#", value: "submissionNo", width: "50px" },
        { title: t("submittedBy"), value: "submittedBy" },
        { title: t("timestamp"), value: "timestamp" },
        { title: "", key: "action", width: "70px", sortable: false },
    ]);

    const data = computed(() =>
        [...props.allSubmissions]
            .sort((a, b) => (a.submissionNumber ?? 0) - (b.submissionNumber ?? 0))
            .map((submission, index) => ({
                submissionNo: index + 1,
                submittedBy: `${submission.submitter.firstName} ${submission.submitter.lastName}`,
                timestamp: submission.time ? new Date(submission.time).toLocaleString() : "-",
                dto: submission,
            })),
    );

    function selectSubmission(submission: SubmissionDTO): void {
        emit("submission-selected", submission);
    }
</script>

<template>
    <v-card>
        <v-card-title>{{ t("groupSubmissions") }}</v-card-title>
        <v-card-text>
            <v-data-table
                :headers="headers"
                :items="data"
                density="compact"
                hide-default-footer
                :no-data-text="t('noSubmissionsYet')"
            >
                <template v-slot:[`item.action`]="{ item }">
                    <v-btn
                        density="compact"
                        variant="plain"
                        @click="selectSubmission(item.dto)"
                    >
                        {{ t("loadSubmission") }}
                    </v-btn>
                </template>
            </v-data-table>
        </v-card-text>
    </v-card>
</template>

<style scoped></style>
