<script lang="ts" setup>
import type { CourseSession, DueDate } from "@/types";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useTranslation } from "i18next-vue";
import dayjs from "dayjs";
import { computed } from "vue";

const props = defineProps<{
  dueDate: DueDate;
  singleLine?: boolean;
  showCourseSession?: boolean;
}>();

const { t } = useTranslation();
const dateType = t(props.dueDate.date_type_translation_key);
const assignmentType = t(props.dueDate.assignment_type_translation_key);

const courseSessionsStore = useCourseSessionsStore();
const courseSession = courseSessionsStore.allCourseSessions.find(
  (cs: CourseSession) => cs.id === props.dueDate.course_session_id
);

if (!courseSession) {
  throw new Error("Course session not found");
}

const isExpert = courseSessionsStore.hasCockpit(courseSession);
const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;

const courseSessionTitle = computed(() => {
  if (props.dueDate.course_session_id) {
    return (
      courseSessionsStore.getCourseSessionById(props.dueDate.course_session_id)
        ?.title ?? ""
    );
  }
  return "";
});
</script>

<template>
  <div
    class="flex justify-between py-4"
    :class="{ 'flex-col': props.singleLine, 'items-center': !props.singleLine }"
  >
    <div class="space-y-1">
      <div>
        <a class="underline" :href="url">
          <span class="text-bold">
            {{ dayjs(props.dueDate.start).format("D. MMMM YYYY") }}:
            <template v-if="dateType">
              {{ dateType }}
            </template>
            <template v-else>
              {{ assignmentType }}
            </template>
            {{ " " }}
          </span>
          <template v-if="assignmentType && dateType">
            {{ assignmentType }}:
            {{ props.dueDate.title }}
          </template>
          <template v-else>
            {{ props.dueDate.title }}
          </template>
        </a>
      </div>
      <div class="text-small text-gray-900">
        <div>
          <span v-if="props.showCourseSession ?? courseSessionTitle">
            {{ courseSessionTitle }}:
          </span>
          {{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
        </div>
      </div>
    </div>
  </div>
</template>
