<script setup lang="ts">
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
import { computed } from "vue";
import { useCourseDataWithCompletion } from "@/composables";

export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall";

export interface Props {
  showCircleSlugs?: string[];
  courseSlug: string;
  courseSessionId: string;
  userId?: string;
  diagramType?: DiagramType;
}

const props = withDefaults(defineProps<Props>(), {
  diagramType: "horizontal",
  showCircleSlugs: undefined,
  userId: undefined,
});

const lpQueryResult = useCourseDataWithCompletion(
  props.courseSlug,
  props.userId,
  props.courseSessionId
);

const circles = computed(() => {
  if (props.showCircleSlugs?.length) {
    return (lpQueryResult.circles.value ?? []).filter(
      (c) => props.showCircleSlugs?.includes(c.slug) ?? true
    );
  }
  return lpQueryResult.circles.value ?? [];
});

const wrapperClasses = computed(() => {
  let classes = "flex";
  if (props.diagramType === "horizontal") {
    classes += " flex-row h-8 space-x-2";
  } else if (props.diagramType === "horizontalSmall") {
    classes += " flex-row h-5 space-x-1";
  } else if (props.diagramType === "singleSmall") {
    classes += " h-8";
  }
  return classes;
});
</script>

<template>
  <div :class="wrapperClasses">
    <LearningPathCircle
      v-for="circle in circles"
      :key="circle.id"
      :sectors="calculateCircleSectorData(circle)"
    ></LearningPathCircle>
  </div>
</template>
