<script setup lang="ts">
import type { Assignment } from "@/types";
import { useRouteQuery } from "@vueuse/router";
import type { Dayjs } from "dayjs";

interface Props {
  assignment: Assignment;
  dueDate?: Dayjs;
}

const props = withDefaults(defineProps<Props>(), {
  dueDate: undefined,
});

const step = useRouteQuery("step");
</script>

<template>
  <!-- eslint-disable vue/no-v-html -->
  <p
    v-if="props.assignment.intro_text"
    class="default-wagtail-rich-text text-large"
    v-html="props.assignment.intro_text"
  ></p>

  <h3 class="mb-4 mt-8">{{ $t("assignment.taskDefinitionTitle") }}</h3>
  <p class="text-large">
    {{ $t("assignment.taskDefinition") }}
  </p>
  <ul>
    <li v-for="(task, index) in props.assignment.tasks" :key="task.id" class="py-1">
      <button class="text-large link" @click="step = (index + 1).toString()">
        - {{ task.value.title }}
      </button>
    </li>
  </ul>

  <h3 class="mb-4 mt-8">{{ $t("assignment.dueDateTitle") }}</h3>
  <p v-if="props.dueDate" class="text-large">
    {{
      $t("assignment.dueDateIntroduction", {
        date: dueDate!.format("DD.MM.YYYY"),
        time: dueDate!.format("HH:mm"),
      })
    }}
  </p>
  <p v-else class="text-large">
    {{ $t("assignment.dueDateNotSet") }}
  </p>

  <div v-if="props.assignment.effort_required">
    <h3 class="mb-4 mt-8">{{ $t("assignment.effortTitle") }}</h3>
    <p class="text-large">{{ props.assignment.effort_required }}</p>
  </div>

  <div v-if="props.assignment.performance_objectives.length">
    <h3 class="mt-8 border-b border-gray-500 pb-4">
      {{ $t("assignment.performanceObjectivesTitle") }}
    </h3>
    <p
      v-for="performance_objective in props.assignment.performance_objectives"
      :key="performance_objective.id"
      class="text-large border-b border-gray-500 py-4"
    >
      {{ performance_objective.value.text }}
    </p>
  </div>

  <div
    v-if="
      props.assignment.evaluation_description ||
      props.assignment.evaluation_document_url
    "
  >
    <h3 class="mb-4 mt-8">{{ $t("assignment.assessmentTitle") }}</h3>
    <p
      v-if="props.assignment.evaluation_description"
      class="default-wagtail-rich-text text-large"
      v-html="props.assignment.evaluation_description"
    ></p>
    <p v-if="props.assignment.evaluation_document_url">
      <a
        :href="props.assignment.evaluation_document_url"
        target="_blank"
        class="text-large link"
      >
        {{ $t("assignment.showAssessmentDocument") }}
      </a>
    </p>
  </div>
</template>
