<script setup lang="ts">
import { computed } from "vue";
import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import CompetenceSummary from "@/components/dashboard/CompetenceSummary.vue";
import AssignmentSummary from "@/components/dashboard/AssignmentSummary.vue";
import MentorOpenTasksCount from "@/components/dashboard/MentorOpenTasksCount.vue";
import MentorMenteeCount from "@/components/dashboard/MentorMenteeCount.vue";
import MentorCompetenceSummary from "@/components/dashboard/MentorCompetenceSummary.vue";
import { getLearningPathUrl } from "@/utils/utils";

const mentorWidgets = [
  "MentorTasksWidget",
  "MentorPersonWidget",
  "MentorCompetenceWidget",
];
const progressWidgets = ["CompetenceWidget", "CompetenceCertificateWidget"];

const props = defineProps<{
  courseConfig: DashboardCourseConfigType;
}>();

const courseSlug = computed(() => props.courseConfig?.course_slug);
const courseName = computed(() => props.courseConfig?.course_title);
const numberOfMentorWidgets = computed(() => {
  return props.courseConfig.widgets.filter((widget) => mentorWidgets.includes(widget))
    .length;
});
const numberOfProgressWidgets = computed(() => {
  return props.courseConfig.widgets.filter((widget) => progressWidgets.includes(widget))
    .length;
});

function hasWidget(widget: WidgetType) {
  return props.courseConfig.widgets.includes(widget);
}

function buttonLink(): string {
  if (props.courseConfig?.role_key === "Member") {
    return getLearningPathUrl(props.courseConfig?.course_slug);
  } else if (props.courseConfig?.role_key === "Expert") {
    return "btn-secondary";
  } else if (props.courseConfig?.role_key === "Supervisor") {
    return "btn-secondary";
  }
}

function hasActionButton(): boolean {
  return props.courseConfig.role_key !== "MentorUK";
}
</script>

<template>
  <div v-if="courseConfig" class="mb-14 space-y-8">
    <div class="flex flex-col space-y-8 bg-white p-6">
      <div class="border-b border-gray-300 pb-8">
        <div class="flex flex-row justify-between">
          <h3 class="mb-4 text-3xl">{{ courseName }}</h3>
          <a v-if="hasActionButton()" :href="buttonLink()" class="btn btn-sm btn-blue">
            foo
          </a>
        </div>
        <p>
          <span class="rounded bg-gray-300 px-2 py-1">{{ courseConfig.role_key }}</span>
          <router-link
            v-if="courseConfig.has_preview"
            :to="getLearningPathUrl(courseConfig.course_slug)"
            class="inline-block pl-6"
            target="_blank"
          >
            <div class="flex items-center">
              <span>{{ $t("a.VorschauTeilnehmer") }}</span>
              <it-icon-external-link class="ml-1 !h-4 !w-4" />
            </div>
          </router-link>
        </p>
      </div>
      <div
        v-if="
          hasWidget('ProgressWidget') &&
          courseConfig.session_to_continue_id &&
          courseSlug
        "
        class="border-b border-gray-300 pb-8"
      >
        <LearningPathDiagram
          :key="courseSlug"
          :course-slug="courseSlug"
          :course-session-id="courseConfig.session_to_continue_id"
          diagram-type="horizontal"
        ></LearningPathDiagram>
      </div>
      <div v-if="numberOfProgressWidgets" class="flex flex-col flex-wrap">
        <CompetenceSummary
          v-if="hasWidget('CompetenceWidget')"
          :course-slug="courseSlug"
          :session-to-continue-id="courseConfig.session_to_continue_id"
          :course-id="courseConfig.course_id"
        ></CompetenceSummary>
        <AssignmentSummary
          v-if="hasWidget('CompetenceCertificateWidget')"
          :course-slug="courseSlug"
          :session-to-continue-id="courseConfig.session_to_continue_id"
          :course-id="courseConfig.course_id"
        />
      </div>
      <div v-if="numberOfMentorWidgets > 0" class="flex flex-col flex-wrap md:flex-row">
        <MentorOpenTasksCount
          v-if="hasWidget('MentorTasksWidget')"
          :course-id="courseConfig.course_id"
        />
        <MentorMenteeCount
          v-if="hasWidget('MentorPersonWidget')"
          :course-id="courseConfig.course_id"
        />
        <MentorCompetenceSummary
          v-if="hasWidget('MentorCompetenceWidget')"
          :course-id="courseConfig.course_id"
        />
      </div>
    </div>
  </div>
</template>
