<script setup lang="ts">
import AssignmentSubmissionProgress from "@/pages/cockpit/assignmentsPage/AssignmentSubmissionProgress.vue";
import { calcAssignmentLearningContents } from "@/services/assignmentService";
import { useCockpitStore } from "@/stores/cockpit";
import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import type { CourseSession } from "@/types";
import log from "loglevel";
import { computed } from "vue";

const props = defineProps<{
  courseSession: CourseSession;
}>();

log.debug("AssignmentsTile created", props.courseSession.id);

const userStore = useUserStore();
const cockpitStore = useCockpitStore();
const learningPathStore = useLearningPathStore();

const assignments = computed(() => {
  // TODO: filter by selected circle
  return calcAssignmentLearningContents(
    learningPathStore.learningPathForUser(props.courseSession.course.slug, userStore.id)
  );
});
</script>

<template>
  <div class="bg-white px-6 py-5">
    <div v-if="cockpitStore.courseSessionUsers">
      <h3 class="heading-3 mb-4 flex items-center gap-2">
        <it-icon-assignment-large class="h-16 w-16"></it-icon-assignment-large>
        <div>Geleitete Fallarbeiten</div>
      </h3>

      <div v-for="assignment in assignments" :key="assignment.id" class="mb-4">
        <AssignmentSubmissionProgress
          :show-title="true"
          :course-session="props.courseSession"
          :assignment="assignment"
        />
      </div>

      <div class="mt-6">
        <router-link
          :to="`/course/${props.courseSession.course.slug}/cockpit/assignment`"
          class="link"
        >
          Alle anzeigen
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
