<script setup lang="ts">
import type {
  Assignment,
  AssignmentCompletionData,
  AssignmentTask,
  AssignmentTaskCompletionData,
  UserDataText,
} from "@/types";
import RichText from "@/components/ui/RichText.vue";

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

const emit = defineEmits<{
  (e: "editTask", task: AssignmentTask): void;
}>();
</script>
<template>
  <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">
      <RichText
        class="pt-6 text-base font-bold"
        :content="taskBlock.value.text"
        open-links-in-new-tab
      />
      <p
        v-if="
          props.assignmentCompletionData &&
          taskBlock.id in props.assignmentCompletionData
        "
        class="font-normal"
      >
        {{ (assignmentCompletionData[taskBlock.id].user_data as UserDataText).text }}
      </p>
    </div>

    <div
      v-if="props.assignmentTaskCompletionData[task.id]?.user_data?.fileInfo"
      class="mt-4"
    >
      <a
        :href="props.assignmentTaskCompletionData[task.id]?.user_data?.fileInfo?.url"
        class="link"
      >
        {{ props.assignmentTaskCompletionData[task.id]?.user_data?.fileInfo?.name }}
      </a>
    </div>
  </div>
</template>
