<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 type { Topic } from "@/types";
import { onMounted, ref } from "vue";

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

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

onMounted(() => {
  if (props.isCurrentCircle) {
    setTimeout(() => {
      circleElement?.value?.scrollIntoView({
        behavior: "smooth",
        inline: "center",
        block: "nearest",
      });
    }, 400);
  }
});
</script>

<template>
  <router-link
    :to="props.circle.frontend_url"
    :data-cy="`circle-${props.circle.title}`"
    class="flex flex-col items-center pb-6"
  >
    <div ref="circleElement" class="flex flex-row items-center pb-2">
      <div class="w-12">
        <hr v-if="!props.isFirstCircle" class="h-[1.6px] w-full border-0 bg-gray-500" />
      </div>
      <LearningPathCircle
        :sectors="calculateCircleSectorData(circle)"
        class="h-24 w-24 snap-center"
      ></LearningPathCircle>
      <div class="w-12">
        <hr v-if="!props.isLastCircle" class="h-[1.6px] w-full border-0 bg-gray-500" />
      </div>
    </div>

    <div class="w-36 text-center text-lg font-bold text-blue-900">
      {{ props.circle.title }}
    </div>

    <div v-if="props.isCurrentCircle" class="whitespace-nowrap">
      <LearningPathContinueButton
        :has-progress="!props.learningPath?.continueData?.has_no_progress"
        :url="props.learningPath?.continueData?.url"
      ></LearningPathContinueButton>
    </div>
  </router-link>
</template>
