<script setup lang="ts">
import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
import type { Assignment } from "@/types";
import { useRouteQuery } from "@vueuse/router";
import log from "loglevel";
import dayjs from "dayjs";

interface Props {
  assignment: Assignment;
  submissionDeadlineStart?: string | null;
}

const props = withDefaults(defineProps<Props>(), {
  submissionDeadlineStart: "",
});

log.debug("AssignmentIntroductionView created", props.assignment);

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.dueDateSubmission") }}</h3>

  <p v-if="submissionDeadlineStart" class="text-large">
    {{ $t("assignment.dueDateIntroduction") }}
    <DateEmbedding :single-date="dayjs(submissionDeadlineStart)"></DateEmbedding>
  </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("a.Bewertung") }}</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>

  <div>
    <h3 class="mb-4 mt-8">{{ $t("a.Kompetenznachweis") }}</h3>
    <p class="text-large">
      {{
        $t("circlePage.Dieser Inhalt gehört zu x", {
          x: assignment?.competence_certificate?.title,
        })
      }}
      <br />
      <router-link
        v-if="assignment.competence_certificate?.frontend_url"
        :to="assignment.competence_certificate?.frontend_url ?? ''"
        class="link"
        data-cy="open-competence-certificate"
      >
        {{ $t("circlePage.Im KompetenzNavi anschauen") }}
      </router-link>
    </p>
  </div>
</template>
