<template>
  <div class="hello public-page">
    <h1
      class="hello__title public-page__title"
      data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
    <a href="/api/oauth/login/">Login</a>
  </div>
</template>

<script>

  import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
  import LoadingButton from '@/components/LoadingButton';
  import pageTitleMixin from '@/mixins/page-title';

  export default {
    mixins: [pageTitleMixin],
    components: {
      LoadingButton
    },

    data() {
      return {
        email: '',
        submitted: false,
        loading: false
      };
    },

    methods: {
      validateBeforeSubmit() {
        this.$validator.validate().then(result => {
          this.submitted = true;
          if (result) {
            this.loading = true;
            // emailExists(this.email).then((response) => {
            //   let redirectRouteName = 'login';
            //
            //   if (response.data) {
            //     redirectRouteName = 'registration';
            //   }
            //   this.$apollo.mutate({
            //     mutation: HELLO_EMAIL_MUTATION,
            //     variables: {
            //       helloEmail: this.email
            //     }
            //   }).then(() => {
            //     this.$router.push({name: redirectRouteName, query: this.$route.query});
            //     this.loading = false;
            //   });
            // })
            //   .catch(() => {
            //     this.loading = false;
            //     this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals.';
            //   });
          }
        });
      },
      resetForm() {
        this.email = '';
        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 {
    &__reset {
      display: inline-block;
      margin-left: $large-spacing;
    }
  }

</style>
