<script setup lang="ts">
import { ComplianceLevel, EMOJI_ABSENT, EMOJI_BEHAVIOR_GOOD, EMOJI_BEHAVIOR_MEDIOCRE, EMOJI_BEHAVIOR_POOR, EMOJI_CLASSROOM_READY, EMOJI_NOT_CLASSROOM_READY, EMOJI_PRESENT, getComplianceLevel, type Entry } from '@/api/classroom_compliance';
import { getFormattedDate } from '@/util';
import { computed } from 'vue';

const props = defineProps<{
  entry: Entry
}>()

const classroomReadinessCompliance = computed(() => getComplianceLevel(props.entry, 'Classroom Readiness'))
const behaviorCompliance = computed(() => getComplianceLevel(props.entry, 'Behavior'))
</script>
<template>
  <div class="student-entry-item">
    <h6>{{ getFormattedDate(entry.date) }}</h6>
    <div class="icons-container">
      <span v-if="entry.absent">{{ EMOJI_ABSENT }}</span>
      <span v-if="!entry.absent">{{ EMOJI_PRESENT }}</span>

      <span v-if="classroomReadinessCompliance === ComplianceLevel.Good">{{ EMOJI_CLASSROOM_READY }}</span>
      <span v-if="classroomReadinessCompliance !== ComplianceLevel.Good">{{ EMOJI_NOT_CLASSROOM_READY }}</span>

      <span v-if="behaviorCompliance === ComplianceLevel.Good">{{ EMOJI_BEHAVIOR_GOOD }}</span>
      <span v-if="behaviorCompliance === ComplianceLevel.Mediocre">{{ EMOJI_BEHAVIOR_MEDIOCRE }}</span>
      <span v-if="behaviorCompliance === ComplianceLevel.Poor">{{ EMOJI_BEHAVIOR_POOR }}</span>
    </div>
    <p v-if="entry.comment.trim().length > 0" class="comment">
      {{ entry.comment }}
    </p>
    <ul v-if="entry.checklistItems">
      <li v-for="item in entry.checklistItems" :key="item.category + item.item" v-text="item.item"></li>
    </ul>
  </div>
</template>
<style scoped>
.student-entry-item {
  border: 1px solid;
  border-radius: 10px;
  padding: 0.5em;
  max-width: 500px;
}

.student-entry-item+.student-entry-item {
  margin-top: 1em;
}

.student-entry-item>h6 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.icons-container>span+span {
  margin-left: 0.5em;
}

.comment {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
</style>
