<script setup lang="ts">
import type {
  Assignment,
  AssignmentCompletionData,
  AssignmentTask,
  UserDataText,
} from "@/types";

const props = defineProps<{
  assignment: Assignment;
  assignmentCompletionData: AssignmentCompletionData;
  allowEdit: boolean;
}>();

const emit = defineEmits<{
  (e: "editTask", task: AssignmentTask): void;
}>();
</script>
<template>
  <!-- eslint-disable vue/no-v-html -->
  <div
    v-for="task in props.assignment.tasks ?? []"
    :key="task.id"
    class="mb-6 border-t border-gray-400"
  >
    <div class="flex flex-row justify-between pt-8">
      <p class="text-sm text-gray-900">{{ task.value.title }}</p>
      <button
        v-if="props.allowEdit"
        class="link pl-2text-sm whitespace-nowrap"
        @click="emit('editTask', task)"
      >
        {{ $t("assignment.edit") }}
      </button>
    </div>
    <div v-for="taskBlock in task.value.content" :key="taskBlock.id">
      <p
        class="default-wagtail-rich-text pt-6 text-base font-bold"
        v-html="taskBlock.value.text"
      ></p>
      <p
        v-if="
          props.assignmentCompletionData &&
          taskBlock.id in props.assignmentCompletionData
        "
        class="font-normal"
      >
        {{ (assignmentCompletionData[taskBlock.id].user_data as UserDataText).text }}
      </p>
    </div>
  </div>
</template>
