<script setup lang="ts">
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
import { useCourseDataWithCompletion } from "@/composables";
import CockpitProfileContent from "@/components/cockpit/profile/CockpitProfileContent.vue";
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
import LearningSequence from "@/pages/learningPath/circlePage/LearningSequence.vue";
import { ref, watch } from "vue";
import type { CircleType } from "@/types";

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

const selectedCircle = ref();

const lpQueryResult = useCourseDataWithCompletion(props.courseSlug, props.userId);

function selectCircle(circle: CircleType) {
  selectedCircle.value = circle;
}

watch(lpQueryResult.learningPath, () => {
  if (lpQueryResult.learningPath?.value?.topics?.length) {
    selectCircle(lpQueryResult.learningPath.value.topics[0].circles[0]);
  }
});
</script>

<template>
  <CockpitProfileContent>
    <template #side>
      <div
        v-for="topic in lpQueryResult.learningPath?.value?.topics ?? []"
        :key="topic.id"
        class="mb-4"
      >
        <h4 class="mb-1 font-semibold text-gray-800">
          {{ topic.title }}
        </h4>
        <button
          v-for="circle in topic.circles"
          :key="circle.id"
          class="flex w-full items-center space-x-2 p-2 pr-4 hover:bg-gray-200 lg:pr-8"
          :class="{ 'bg-gray-200': selectedCircle === circle }"
          @click="selectCircle(circle)"
        >
          <LearningPathCircle
            :sectors="calculateCircleSectorData(circle)"
            class="h-10 w-10 snap-center rounded-full bg-white p-0.5"
          ></LearningPathCircle>
          <span>{{ circle.title }}</span>
        </button>
      </div>
    </template>
    <template #main>
      <ol v-if="selectedCircle" class="flex-auto bg-gray-200 px-6 py-4 lg:px-16">
        <li
          v-for="learningSequence in selectedCircle.learning_sequences ?? []"
          :key="learningSequence.id"
        >
          <LearningSequence
            :course-slug="props.courseSlug"
            :circle="selectedCircle"
            :learning-sequence="learningSequence"
            readonly
            hide-links
          ></LearningSequence>
        </li>
      </ol>
    </template>
  </CockpitProfileContent>
</template>
