<template>
  <div class="emailconfirmation public-page">
    <h1 class="emailconfirmation__title public-page__title">Überprüfung der E-Mail Adresse</h1>
    <p v-if="loading">Der Verifikationscode wird überprüft.</p>
    <p
      data-cy="code-ok-msg"
      v-if="showOkMessage">Der Verifikationscode ist gültig. Sie werden weitergeleitet.</p>
    <p
      data-cy="code-nok-msg"
      v-if="showErrorMessage">{{ errorMessage }}</p>

  </div>
</template>

<script>

import REGISTRATION_MUTATION from '@/graphql/gql/mutations/registration.gql';

export default {

  data() {
    return {
      loading: true,
      keyValid: false,
      errorMessage: ''
    };
  },

  computed: {
    showOkMessage() {
      return !this.loading && this.keyValid;
    },
    showErrorMessage() {
      return !this.loading && !this.keyValid;
    }
  },

  mounted() {
    this.$apollo.mutate({
      mutation: REGISTRATION_MUTATION,
      client: 'publicClient',
      variables: {
        input: {
          confirmationKey: this.$route.query.confirmation,
          userId: this.$route.query.id
        }
      },
      fetchPolicy: 'no-cache'
    }).then(({data}) => {
      this.loading = false;
      if (data.registration.success) {
        this.keyValid = true;

        if (data.registration.message === 'no_valid_license') {
          this.$router.push({name: 'licenseActivation'});
        } else {
          this.$router.push('/');
        }
      } else {
        switch (data.registration.message) {
          case 'invalid_key':
            this.errorMessage = 'Der angegebene Verifizierungscode ist ungültig oder abgelaufen.';
            break;
          case 'no_valid_license':
            this.$router.push({name: 'licenseActivation'});
            break;
          default:
            this.errorMessage = 'Ein Fehler ist aufgetreten. Bitte kontaktieren Sie den Administrator.';
        }
      }
    })
    .catch(() => {
      this.errorMessage = 'Ein Fehler ist aufgetreten. Bitte kontaktieren Sie den Administrator.'
    });
  },

};
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.text-link {
  font-family: $sans-serif-font-family;
  color: $color-brand;
}

.actions {
  &__reset {
    display: inline-block;
    margin-left: $large-spacing;
  }
}

</style>
