<script setup lang="ts">
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
import LearningPathContinueButton from "@/pages/learningPath/learningPathPage/LearningPathContinueButton.vue";
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
import { computed, ref, watch } from "vue";
import type { CircleType, LearningContentWithCompletion } from "@/types";

const props = defineProps<{
  circle: CircleType;
  nextLearningContent: LearningContentWithCompletion | undefined;
}>();

const circleElement = ref<HTMLElement | null>(null);

const isCurrentCircle = computed(() => {
  return props.nextLearningContent?.circle?.id === props.circle.id;
});

watch(
  () => isCurrentCircle.value,
  (isCurrent) => {
    if (isCurrent) {
      setTimeout(() => {
        circleElement?.value?.scrollIntoView({
          behavior: "smooth",
          inline: "center",
          block: "nearest",
        });
      });
    }
  },
  { immediate: true }
);
</script>

<template>
  <router-link
    :key="props.circle.id"
    :to="props.circle.frontend_url"
    class="flex flex-row items-center pb-2"
  >
    <LearningPathCircle
      :sectors="calculateCircleSectorData(circle)"
      class="h-12 w-12"
    ></LearningPathCircle>
    <div ref="circleElement" class="pl-3 font-bold text-blue-900">
      {{ props.circle.title }}
    </div>

    <div v-if="isCurrentCircle" class="whitespace-nowrap pl-4">
      <LearningPathContinueButton
        :next-learning-content="props.nextLearningContent"
      ></LearningPathContinueButton>
    </div>
  </router-link>
</template>
