<script setup lang="ts">
import { computed } from "vue";
import { useTranslation } from "i18next-vue";

export type ClosingButtonVariant = "close" | "mark_as_done";

const props = defineProps<{
  showStartButton: boolean;
  showPreviousButton: boolean;
  showNextButton: boolean;
  disableNextButton: boolean;
  showExitButton: boolean;
  closingButtonVariant: ClosingButtonVariant;
}>();

const { t } = useTranslation();

const emit = defineEmits(["start", "previous", "next", "exit"]);

// eslint-disable-next-line vue/return-in-computed-property
const closingButtonText = computed(() => {
  switch (props.closingButtonVariant) {
    case "close":
      return t("general.close");
    case "mark_as_done":
      return t("learningContent.markAsDone");
  }
});
</script>

<template>
  <nav class="nav absolute bottom-0 w-full border-t px-6 py-4">
    <div class="relative z-10 flex flex-row place-content-end bg-white">
      <button
        v-if="props.showPreviousButton"
        class="btn-secondary mr-2 flex items-center"
        data-cy="previous-step"
        @click="$emit('previous')"
      >
        <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
        {{ $t("general.backCapitalized") }}
      </button>
      <button
        v-if="props.showNextButton"
        :disabled="props.disableNextButton"
        class="btn-blue z-10 flex items-center"
        data-cy="next-step"
        @click="$emit('next')"
      >
        {{ $t("general.next") }}
        <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
      </button>
      <button
        v-if="props.showStartButton"
        type="button"
        class="btn-blue z-10 flex items-center"
        data-cy="next-step"
        @click="$emit('start')"
      >
        {{ $t("general.start") }}
        <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
      </button>
      <button
        v-if="props.showExitButton"
        type="button"
        class="btn-blue z-10 flex items-center"
        data-cy="complete-and-continue"
        @click="emit('exit')"
      >
        {{ closingButtonText }}
        <it-icon-check
          v-if="props.closingButtonVariant == 'mark_as_done'"
          class="ml-2"
        ></it-icon-check>
      </button>
    </div>
  </nav>
</template>

<style scoped></style>
