<script setup lang="ts">
import { computed } from "vue";
import type { LearningContentWithCompletion, TopicType } from "@/types";
import LearningPathCircleColumn from "./LearningPathCircleColumn.vue";
import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
import { filterCircles } from "./utils";

interface Props {
  topic: TopicType;
  topicIndex: number;
  nextLearningContent?: LearningContentWithCompletion;
  overrideCircleUrlBase?: string;
  filter?: string;
  isLastTopic: boolean;
}

const props = defineProps<Props>();

const isFirstCircle = (circleIndex: number) =>
  props.topicIndex === 0 && circleIndex === 0;

const isLastCircle = (circleIndex: number, numCircles: number) =>
  props.isLastTopic && circleIndex === numCircles - 1;

const filteredCircles = computed(() => {
  return filterCircles(props.filter, props.topic.circles);
});
</script>

<template>
  <div class="border-l border-gray-500" :class="topicIndex == 0 ? 'ml-6 sm:ml-12' : ''">
    <p
      :id="`topic-${topic.slug}`"
      class="inline-block h-12 self-start px-4 font-bold text-gray-800"
      data-cy="lp-topic"
    >
      {{ topic.title }}
    </p>
    <div class="flex flex-row pt-6">
      <LearningPathCircleColumn
        v-for="(circle, circleIndex) in filteredCircles"
        :key="circle.id"
        :circle="circle"
        :next-learning-content="nextLearningContent"
        :is-first-circle="isFirstCircle(circleIndex)"
        :is-last-circle="isLastCircle(circleIndex, filteredCircles.length)"
        :override-circle-url="
          overrideCircleUrlBase ? `${overrideCircleUrlBase}/${circle.slug}` : undefined
        "
      ></LearningPathCircleColumn>
    </div>
  </div>
</template>
