<script setup lang="ts">
import { useAssignmentStore } from "@/stores/assignmentStore";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type {
  Assignment,
  CourseSessionAssignmentDetails,
  LearningContent,
} from "@/types";
import * as log from "loglevel";
import { onMounted, reactive } from "vue";

const assignmentStore = useAssignmentStore();

interface State {
  assignment: Assignment | undefined;
  courseSessionAssignmentDetails: CourseSessionAssignmentDetails | undefined;
}

const state: State = reactive({
  assignment: undefined,
  courseSessionAssignmentDetails: undefined,
});

const props = defineProps<{
  assignmentId: number;
  learningContent: LearningContent;
}>();

onMounted(async () => {
  log.debug("AssignmentView mounted", props.assignmentId, props.learningContent);

  const courseSessionsStore = useCourseSessionsStore();

  try {
    state.assignment = await assignmentStore.loadAssignment(props.assignmentId);
    state.courseSessionAssignmentDetails = courseSessionsStore.findAssignmentDetails(
      props.learningContent.id
    );
  } catch (error) {
    log.error(error);
  }
});
</script>

<template>
  <div class="container-medium">
    <div v-if="state.assignment" class="lg:mt-12">
      <h2>Einleitung</h2>

      <h3 class="mt-8">Ausgangslage</h3>
      <p>{{ state.assignment.starting_position }}</p>

      <h3 class="mt-8">Abgabetermin</h3>
      <p v-if="state.courseSessionAssignmentDetails">
        {{ state.courseSessionAssignmentDetails }}
      </p>
      <p v-else>Keine Abgabedaten erfasst für diese Durchführung</p>

      <pre class="mt-16">
        {{ state.assignment }}
      </pre>
    </div>
  </div>
</template>
