<script setup lang="ts">
import { EMOJI_ABSENT, EMOJI_BEHAVIOR_GOOD, EMOJI_BEHAVIOR_MEDIOCRE, EMOJI_BEHAVIOR_POOR, EMOJI_PHONE_COMPLIANT, EMOJI_PHONE_NONCOMPLIANT, EMOJI_PRESENT, type Entry } from '@/api/classroom_compliance';

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

function getFormattedDate() {
  const d = new Date(props.entry.date)
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return days[d.getDay()] + ', ' + d.toLocaleDateString()
}
</script>
<template>
  <div class="student-entry-item">
    <h6>{{ getFormattedDate() }}</h6>
    <div class="icons-container">
      <span v-if="entry.absent">{{ EMOJI_ABSENT }}</span>
      <span v-if="!entry.absent">{{ EMOJI_PRESENT }}</span>

      <span v-if="entry.phoneCompliant === true">{{ EMOJI_PHONE_COMPLIANT }}</span>
      <span v-if="entry.phoneCompliant === false">{{ EMOJI_PHONE_NONCOMPLIANT }}</span>

      <span v-if="entry.behaviorRating === 3">{{ EMOJI_BEHAVIOR_GOOD }}</span>
      <span v-if="entry.behaviorRating === 2">{{ EMOJI_BEHAVIOR_MEDIOCRE }}</span>
      <span v-if="entry.behaviorRating === 1">{{ EMOJI_BEHAVIOR_POOR }}</span>
    </div>
    <p v-if="entry.comment.trim().length > 0" class="comment">
      {{ entry.comment }}
    </p>
  </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>
