<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 { CircleType, LearningContentWithCompletion } from "@/types";
import { computed, ref, watch } from "vue";

const props = defineProps<{
  circle: CircleType;
  nextLearningContent: LearningContentWithCompletion | undefined;
  isFirstCircle: boolean;
  isLastCircle: boolean;
  overrideCircleUrl?: string;
}>();

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

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

function scrollToCircle() {
  if (isCurrentCircle.value) {
    setTimeout(() => {
      circleElement?.value?.scrollIntoView({
        behavior: "smooth",
        inline: "center",
        block: "nearest",
      });
    });
  }
}

watch(
  () => isCurrentCircle.value,
  (isCurrent) => {
    if (isCurrent) {
      scrollToCircle();
    }
  },
  { immediate: true }
);
</script>

<template>
  <router-link
    :to="overrideCircleUrl ? overrideCircleUrl : props.circle.frontend_url"
    :data-cy="`circle-${props.circle.title}`"
    class="cy-lp-circle 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="isCurrentCircle" class="whitespace-nowrap">
      <LearningPathContinueButton
        :next-learning-content="props.nextLearningContent"
      ></LearningPathContinueButton>
    </div>
  </router-link>
</template>
