<script lang="ts" setup>
import type { DashboardDueDate } from "@/services/dashboard";
import dayjs from "dayjs";
import { useTranslation } from "i18next-vue";
import { computed } from "vue";

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

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

const urlText = computed(() => {
  let result = "";
  if (dateType) {
    result += dateType;
  }

  if (assignmentType && !props.dueDate.title.startsWith(assignmentType)) {
    result += " " + assignmentType;
  }

  if (props.dueDate.title) {
    result += " " + props.dueDate.title;
  }

  return result.trim();
});

const showAsUrl = computed(() => {
  return ["SUPERVISOR", "EXPERT", "MEMBER"].includes(
    props.dueDate.course_session.my_role
  );
});

const url = computed(() => {
  if (["SUPERVISOR", "EXPERT"].includes(props.dueDate.course_session.my_role)) {
    return props.dueDate.url_expert;
  }
  return props.dueDate.url;
});
</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 v-if="showAsUrl" :href="url">
          <span class="text-bold text-gray-900">
            {{ dayjs(props.dueDate.start).format("dddd D. MMMM YYYY") }}
          </span>
        </a>
        <span v-else class="text-bold text-gray-900">
          {{ dayjs(props.dueDate.start).format("dddd D. MMMM YYYY") }}
        </span>
      </div>
      <div>
        <a v-if="showAsUrl" class="underline" :href="url">
          <span class="text-bold">
            {{ urlText }}
          </span>
        </a>
        <span v-else class="text-bold">
          {{ urlText }}
        </span>
      </div>
      <div class="text-small text-gray-900">
        <div>
          <span v-if="props.dueDate.course_session.is_uk">
            {{ props.dueDate.course_session.session_title }}:
          </span>
          {{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
        </div>
      </div>
      <div v-if="props.dueDate.persons?.length" class="flex gap-2">
        <div v-for="person in props.dueDate.persons" :key="person.user_id">
          <img
            class="inline-block h-11 w-11 rounded-full"
            :src="person.avatar_url_small || '/static/avatars/myvbv-default-avatar.png'"
            :alt="`${person.first_name} ${person.last_name}`"
          />
        </div>
      </div>
    </div>
  </div>
</template>
