<template>
  <div class="login public-page">
    <h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
    <form
      class="login__form login-form"
      novalidate
      @submit.prevent="validateBeforeSubmit">
      <div class="login-form__field skillboxform-input">
        <label
          for="email"
          class="skillboxform-input__label">E-Mail</label>
        <input
          v-model="email"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('email') }"
          name="email"
          type="text"
          data-vv-as="E-Mail"
          class="change-form__email skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="email-input"
          id="email"
        >
        <small
          class="skillboxform-input__error"
          data-cy="email-local-errors"
          v-if="errors.has('email') && submitted"
        >{{ errors.first('email') }}</small>
        <small
          :key="error"
          class="skillboxform-input__error"
          data-cy="email-remote-errors"
          v-for="error in emailErrors"
        >{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label
          for="pw"
          class="skillboxform-input__label">Passwort</label>
        <input
          v-model="password"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('password') }"
          name="password"
          type="password"
          data-vv-as="Passwort"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="password-input"
          id="pw"
        >
        <small
          class="skillboxform-input__error"
          data-cy="password-local-errors"
          v-if="errors.has('password') && submitted"
        >{{ errors.first('password') }}</small>
        <small
          :key="error"
          class="skillboxform-input__error"
          data-cy="password-remote-errors"
          v-for="error in passwordErrors"
        >{{ error }}</small>
      </div>
      <div class="skillboxform-input">
        <small
          class="skillboxform-input__error"
          data-cy="login-error"
          v-if="loginError">{{ loginError }}</small>
      </div>
      <div class="actions">
        <button
          class="button button--primary button--big actions__submit"
          data-cy="login-button">Anmelden</button>
      </div>
    </form>
  </div>
</template>

<script>
import BETA_LOGIN_MUTATION from '@/graphql/gql/mutations/betaLogin.gql';

export default {
  components: {},

  data() {
    return {
      email: '',
      password: '',
      emailErrors: [],
      passwordErrors: [],
      loginError: '',
      submitted: false
    };
  },

  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        this.submitted = true;
        let that = this;
        if (result) {
          this.$apollo.mutate({
            client: 'publicClient',
            mutation: BETA_LOGIN_MUTATION,
            variables: {
              input: {
                usernameInput: this.email,
                passwordInput: this.password
              }
            },
            update(
              store,
              {
                data: {
                  betaLogin
                }
              }
            ) {
              try {
                if (betaLogin.success) {
                  const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/';
                  that.$router.push(redirectUrl);
                }
              } catch (e) {
                console.warn(e);
                that.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
              }
            }
          }).catch(error => {
            const firstError = error.graphQLErrors[0];
            switch (firstError.message) {
              case 'invalid_credentials':
                that.loginError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
                break;
              case 'license_inactive':
                that.loginError = 'Ihre Lizenz ist nicht mehr aktiv.';
                break;
            }
          });
        }
      });
    },
    resetForm() {
      this.email = '';
      this.password = '';
      this.submitted = false;
      this.$validator.reset();
    }
  },
};
</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 {

  display: flex;
  justify-content: space-between;

  &__reset {
    display: inline-block;
    margin-left: $large-spacing;
    padding: 15px;
    line-height: 19px;
  }
}

</style>
