<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 type { Circle } from "@/services/circle";
import type { LearningPath } from "@/services/learningPath";
import { onMounted, ref } from "vue";

const props = defineProps<{
  learningPath: LearningPath | undefined;
  circle: Circle;
  isCurrentCircle: boolean;
}>();

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

onMounted(() => {
  if (props.isCurrentCircle) {
    setTimeout(() => {
      circleElement?.value?.scrollIntoView({
        behavior: "smooth",
        inline: "nearest",
        block: "center",
      });
    }, 400);
  }
});
</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
        :has-progress="!props.learningPath?.continueData?.has_no_progress"
        :url="props.learningPath?.continueData?.url"
      ></LearningPathContinueButton>
    </div>
  </router-link>
</template>
