<script setup lang="ts">
import { ClassroomComplianceAPIClient, type ClassNote } from '@/api/classroom_compliance';
import { useAuthStore } from '@/stores/auth';

const props = defineProps<{
  note: ClassNote
  disabled?: boolean
}>()
const emit = defineEmits(['noteDeleted'])
const authStore = useAuthStore()
const apiClient = new ClassroomComplianceAPIClient(authStore)

async function deleteNote() {
  const result = await apiClient.deleteClassNote(props.note.classId, props.note.id).handleErrorsWithAlert()
  if (result !== null) {
    emit('noteDeleted')
  }
}
</script>
<template>
  <div class="class-note-item">
    <p class="class-note-item-content">{{ note.content }}</p>
    <div class="class-note-item-attributes-container">
      <p class="class-note-item-timestamp">{{ new Date(note.createdAt).toLocaleString() }}</p>
      <button class="class-note-item-delete-button" @click="deleteNote()" :disabled="disabled">Delete</button>
    </div>
  </div>
</template>
<style scoped>
.class-note-item {
  padding: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-color: rgb(49, 49, 49);
  border-radius: 10px;
  font-size: smaller;
  max-width: 500px;
  display: flex;
}

.class-note-item-content {
  margin: 0;
  flex-grow: 1;
}

.class-note-item-attributes-container {
  min-width: 200px;
  text-align: right;
}

.class-note-item-timestamp {
  margin: 0;
}

.class-note-item-delete-button {
  background-color: inherit;
  border: none;
  color: rgb(207, 207, 207);
}

.class-note-item-delete-button:hover {
  cursor: pointer;
  color: white;
}
</style>
