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

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

export interface Props {
  diagramType?: DiagramType;
  learningPath: LearningPath;
  // set to undefined (default) to show all circles
  showCircleTranslationKeys?: string[];
}

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

const circles = computed(() =>
  props.learningPath.circles.filter(
    (c) => props.showCircleTranslationKeys?.includes(c.translation_key) ?? true
  )
);

const wrapperClasses = computed(() => {
  let classes = "flex my-5";
  if (props.diagramType === "horizontal") {
    classes += " flex-row h-8";
  } else if (props.diagramType === "horizontalSmall") {
    classes += " flex-row h-5";
  } else if (props.diagramType === "singleSmall") {
    classes += " h-8";
  }
  return classes;
});

const circleClasses = computed(() => {
  if (props.diagramType === "horizontal" || props.diagramType === "horizontalSmall") {
    return "pl-1";
  }
  return "";
});
</script>

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