<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 { LearningContentType } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";

interface Props {
  title?: string;
  subtitle: string;
  learningContentType: LearningContentType;
  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: undefined,
  startBadgeText: undefined,
  endBadgeText: undefined,
  closeButtonVariant: "mark_as_done",
  baseUrl: undefined,
  stepQueryParam: undefined,
});

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

<template>
  <div class="container-large">
    <div
      v-if="props.learningContentType !== 'learnpath.LearningContentPlaceholder'"
      class="flex h-min items-center gap-2 rounded-full pb-10"
    >
      <component
        :is="learningContentTypeData(props.learningContentType).icon"
        class="h-6 w-6 text-gray-900"
      ></component>
      <p class="text-gray-900" data-cy="lc-subtitle">
        {{ props.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>
