<script setup lang="ts">
// Layout for learning contents with multiple steps
import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
import type { ClosingButtonVariant } from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
import LearningContentFooter from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
import type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
import { computed } from "vue";

interface Props {
  title?: string;
  subTitle?: string;
  icon?: string;
  learningContent?: LearningContent;
  showStartButton: boolean;
  showPreviousButton: boolean;
  showNextButton: boolean;
  showExitButton: boolean;
  currentStep: number;
  stepsCount: number;
  startBadgeText?: string;
  endBadgeText?: string;
  closeButtonVariant?: ClosingButtonVariant;
  baseUrl?: string;
  stepQueryParam?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  subTitle: "",
  icon: "",
  learningContent: undefined,
  startBadgeText: undefined,
  endBadgeText: undefined,
  closeButtonVariant: "mark_as_done",
  baseUrl: undefined,
  stepQueryParam: undefined,
});

const subTitle = computed(() => {
  if (props.subTitle) {
    return props.subTitle;
  }
  if (props.learningContent) {
    return learningContentTypeData(props.learningContent).title;
  }
  return "";
});

const icon = computed(() => {
  if (props.icon) {
    return props.icon;
  }
  if (props.learningContent) {
    return learningContentTypeData(props.learningContent).icon;
  }
  return "";
});

const emit = defineEmits(["previous", "next", "exit"]);
</script>

<template>
  <div class="container-large">
    <div
      v-if="
        props.learningContent?.content_type !== 'learnpath.LearningContentPlaceholder'
      "
      class="flex h-min items-center gap-2 rounded-full pb-10"
    >
      <component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
      <p v-if="subTitle" class="text-gray-900" data-cy="lc-subtitle">
        {{ subTitle }}
      </p>
    </div>

    <h2 v-if="props.title" class="mb-6 text-3xl" data-cy="lc-title">
      {{ props.title }}
    </h2>
    <ItNavigationProgress
      v-if="props.stepsCount > 1"
      :current-step="props.currentStep"
      :start-badge-text="props.startBadgeText"
      :steps="stepsCount"
      :end-badge-text="props.endBadgeText"
      :base-url="props.baseUrl"
      :query-param="props.stepQueryParam"
      class="mb-8 overflow-hidden"
    ></ItNavigationProgress>
    <slot></slot>
  </div>
  <LearningContentFooter
    :show-start-button="props.showStartButton"
    :show-next-button="props.showNextButton"
    :show-previous-button="props.showPreviousButton"
    :show-exit-button="props.showExitButton"
    :closing-button-variant="props.closeButtonVariant"
    @previous="emit('previous')"
    @next="emit('next')"
    @start="emit('next')"
  ></LearningContentFooter>
</template>
