<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useEntities } from "@/services/entities";
import { useUserStore } from "@/stores/user";
import type { DropdownSelectable } from "@/types";
import { useTranslation } from "i18next-vue";
import { computed, ref, watch } from "vue";

const { t } = useTranslation();

const user = useUserStore();

const { courseProfiles } = useEntities();

const selectedCourseProfile = ref({
  id: 0,
  name: t("a.Auswählen"),
});

const validCourseProfile = computed(() => {
  return selectedCourseProfile.value.id !== 0;
});

watch(selectedCourseProfile, async (courseProfile: DropdownSelectable) => {
  const courseProfileWithCode = courseProfiles.value.find(
    (cp) => cp.id === courseProfile.id
  );
  if (courseProfileWithCode) {
    user.updateChosenCourseProfile(courseProfileWithCode);
  }
});

const courseProfilesToDropdown = computed(() => {
  return courseProfiles.value.map((profile) => ({
    ...profile,
    name: t(`profile.${profile.code}`),
  }));
});
</script>

<template>
  <WizardPage :step="2">
    <template #content>
      <h2 class="my-10" data-cy="account-course-profile-title">
        {{ $t("a.Zulassungsprofil auswählen") }}
      </h2>

      <p class="mb-6 max-w-md hyphens-none">
        {{
          $t(
            "a.Wähle ein Zulassungsprofil, damit du deinen Lehrgang an der richtigen Stelle beginnen kannst. Du kannst ihn später jederzeit ändern."
          )
        }}
      </p>

      <ItDropdownSelect
        v-model="selectedCourseProfile"
        :items="courseProfilesToDropdown"
      />
    </template>

    <template #footer>
      <router-link v-slot="{ navigate }" :to="{ name: 'checkoutAddress' }" custom>
        <button
          :disabled="!validCourseProfile"
          class="btn-blue flex items-center"
          role="link"
          data-cy="continue-button"
          @click="navigate"
        >
          {{ $t("general.next") }}
          <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
        </button>
      </router-link>
    </template>
  </WizardPage>
</template>
