<script setup lang="ts">
import { ClassroomComplianceAPIClient, type Entry, type Student } from '@/api/classroom_compliance';
import { useAuthStore } from '@/stores/auth';
import { computed, onMounted, ref, type Ref } from 'vue';
import StudentEntryItem from './StudentEntryItem.vue';
import { APIError } from '@/api/base';


const props = defineProps<{
  student: Student
}>()
const authStore = useAuthStore()

const entries: Ref<Entry[]> = ref([])
const loading: Ref<boolean> = ref(true)
const noEntries = computed(() => !loading.value && entries.value.length === 0)

const apiClient = new ClassroomComplianceAPIClient(authStore)

onMounted(() => {
  apiClient.getStudentEntries(props.student.classId, props.student.id).result
    .then(result => {
      if (!(result instanceof APIError)) {
        entries.value = result
      } else {
        console.warn('Failed to get entries for student.', result.message)
      }
    })
    .finally(() => loading.value = false)
})
</script>
<template>
  <div>
    <h3 class="align-center">Entries</h3>
    <div>
      <p v-if="noEntries" class="align-center">
        This student doesn't have any entries yet.
      </p>
      <StudentEntryItem v-for="entry, idx in entries" :key="idx" :entry="entry" />
    </div>
  </div>
</template>
