<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import { getLoginURL, getSignUpURL } from "@/router/utils";
import { useUserStore } from "@/stores/user";
import { computed } from "vue";
import { useRoute } from "vue-router";

const props = defineProps({
  courseType: {
    type: String,
    required: true,
  },
});

const user = useUserStore();
const route = useRoute();

function constructParams() {
  const params: { lang: string; next?: string; course?: string } = {
    lang: user.language,
  };

  const nextValue = route.query.next;
  if (nextValue && typeof nextValue === "string") {
    params.next = nextValue;
  } else {
    params.course = props.courseType;
  }

  return params;
}

const loginURL = computed(() => getLoginURL(constructParams()));
const signUpURL = computed(() => getSignUpURL(constructParams()));
</script>

<template>
  <WizardPage :step="0">
    <template #content>
      <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
      <p class="mb-4">
        {{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
      </p>
      <a :href="signUpURL" class="btn-primary">
        {{ $t("a.Konto erstellen") }}
      </a>

      <p class="mb-4 mt-12">{{ $t("a.Hast du schon ein Konto?") }}</p>
      <a :href="loginURL" class="btn-secondary" data-cy="login-button">
        {{ $t("a.Anmelden") }}
      </a>
    </template>
  </WizardPage>
</template>
