<script setup lang="ts">
import { APIError } from '@/api/base';
import { ClassroomComplianceAPIClient, type EntriesResponseStudent } from '@/api/classroom_compliance';
import { useAuthStore } from '@/stores/auth';
import { onMounted, ref, type Ref } from 'vue';
const props = defineProps<{
  student: EntriesResponseStudent,
  classId: number,
  showLabels: boolean
}>()

const authStore = useAuthStore()
const labels: Ref<string[]> = ref([])

onMounted(() => {
  const api = new ClassroomComplianceAPIClient(authStore)
  api.getStudentLabels(props.classId, props.student.id).result
    .then(values => {
      if (values instanceof APIError) {
        console.error("Failed to get labels for student", props.student)
      } else {
        labels.value = values
      }
    })
})
</script>
<template>
  <td class="student-name-cell" :class="{ 'student-removed': student.removed }">
    <RouterLink :to="'/classroom-compliance/classes/' + student.classId + '/students/' + student.id"
      class="student-link">
      {{ student.name }}
    </RouterLink>
    <span v-if="showLabels">
      <span v-for="label in labels" :key="label" class="student-name-cell-label">
        {{ label }}
      </span>
    </span>
    <div v-if="classId !== student.classId" class="other-class-text">
      <RouterLink :to="'/classroom-compliance/classes/' + student.classId">In another class</RouterLink>
    </div>
  </td>
</template>
<style scoped>
.student-name-cell {
  padding-left: 0.25rem;
  text-align: left;
}

.student-name-cell-label {
  font-size: 10px;
  background-color: rgb(121, 99, 3);
  border: 1px solid gray;
  border-radius: 0.25rem;
  padding: 0.05rem 0.2rem;
  margin: 0 0.1rem;
}

.student-link {
  text-decoration: none;
  color: inherit;
}

.student-link:hover {
  text-decoration: underline;
}

.student-removed {
  text-decoration: line-through;
  color: gray;
}

.other-class-text {
  font-size: x-small;
}

.other-class-text>a {
  color: gray;
  text-decoration: none;
}

.other-class-text>a:hover {
  text-decoration: underline;
}
</style>
