<template>
  <div class="license-activation public-page">
    <header class="info-header">
      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{me.email}}</span> haben wir keine gültige Lizenz gefunden</p>
    </header>
    <section class="coupon">
      <form class="license-activation__form license-activation-form" novalidate @submit.prevent="validateBeforeSubmit">
        <h2>Geben Sie einen Coupon-Code ein</h2>
        <div class="change-form__field skillboxform-input">
          <label for="coupon" class="skillboxform-input__label">Coupon-Code</label>
          <input
            id="coupon"
            name="coupon"
            type="coupon"
            data-vv-as="Coupon"
            v-model="coupon"
            v-validate="'required'"
            :class="{ 'skillboxform-input__input--error': errors.has('coupon') }"
            class="change-form__new skillbox-input skillboxform-input__input"
            autocomplete="off"
            data-cy="coupon-input"
            tabindex="0"
          />
          <small
            v-if="errors.has('coupon') && submitted"
            class="skillboxform-input__error"
            data-cy="coupon-local-errors"
          >{{ errors.first('coupon') }}</small>
          <small
            v-for="error in couponErrors"
            :key="error"
            class="skillboxform-input__error"
            data-cy="coupon-remote-errors"
          >{{ error }}</small>
        </div>
        <div class="actions">
          <button class="button button--primary button--big actions__submit" data-cy="coupon-button">Coupon abschicken</button>
        </div>
      </form>
    </section>
    <section class="get-license">
      <h2>Oder, kaufen Sie eine Lizenz</h2>
        <ul>
          <li><a href="https://www.hep-verlag.ch">mySkillobx für Lehrpersonen</a></li>
          <li><a href="https://www.hep-verlag.ch">mySkillobx für Lernende</a></li>
        </ul>
    </section>
  </div>
</template>

<script>

import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/meQuery.gql';

export default {
  components: {},

  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        this.submitted = true;
        let that = this;
        if (result) {
          this.$apollo.mutate({
            mutation: REDEEM_COUPON,
            variables: {
              input: {
                couponCodeInput: this.coupon
              }
            },
            update(
              store,
              {
                data: {coupon}
              }
            ) {
              if (coupon.success) {
                that.couponErrors = [];
                that.$apollo.query({
                    query: ME_QUERY,
                    fetchPolicy: 'network-only',
                  }).then(() => that.$router.push('/'));
              } else {
                if (coupon.errors[0].field === 'invalid_coupon') {
                  that.couponErrors = ['Der angegebene Coupon-Code ist falsch.'];
                } else {
                  that.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
                }
              }
            }
          });
        }
      });
    },
    resetForm() {
      this.coupon = '';
      this.submitted = false;
      this.$validator.reset();
    }
  },

  data() {
    return {
      coupon: '',
      couponErrors: [],
      loginError: '',
      submitted: false,
      me: {
        email: ''
      }
    };
  },

  apollo: {
    me: {
      query: ME_QUERY,
    },
  },
};
</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;
  }
}

.get-license {
  margin-top: $large-spacing
}

</style>
