<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import AssignmentDetails from "@/pages/cockpit/assignmentsPage/AssignmentDetails.vue";
import { calcAssignmentLearningContents } from "@/services/assignmentService";
import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import * as log from "loglevel";
import { computed, onMounted } from "vue";

const props = defineProps<{
  courseSlug: string;
}>();

log.debug("AssignmentsPage created", props.courseSlug);

const learningPathStore = useLearningPathStore();
const userStore = useUserStore();
const courseSession = useCurrentCourseSession();

onMounted(async () => {
  log.debug("AssignmentsPage mounted");
});

const assignments = computed(() => {
  return calcAssignmentLearningContents(
    learningPathStore.learningPathForUser(courseSession.value.course.slug, userStore.id)
  );
});
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <nav class="py-4 pb-4">
        <router-link
          class="btn-text inline-flex items-center pl-0"
          :to="`/course/${props.courseSlug}/cockpit`"
        >
          <it-icon-arrow-left />
          <span>{{ $t("general.back") }}</span>
        </router-link>
      </nav>
      <header>
        <h2 class="heading-2 mb-4 flex items-center gap-2">
          <it-icon-assignment-large class="h-16 w-16"></it-icon-assignment-large>
          <div>Geleitete Fallarbeiten</div>
        </h2>
      </header>
      <main>
        <div v-for="assignment in assignments" :key="assignment.id">
          <div class="bg-white p-6">
            <AssignmentDetails
              :course-session="courseSession"
              :assignment="assignment"
            />
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
