<template>
  <div>
    <div class="my-5 text-center offset-2 col-8">
      <img src="~@fortawesome/fontawesome-pro/svgs/solid/door-open.svg" class="img-fluid" />
    </div>
    <div class="text-center">
      <h2>Jetzt registrieren</h2>
      <p>
        oder
        <a class="text-vue2" role="button" @click="changeComponent('LoginUser')"
        >melden Sie sich mit Ihrem Konto an</a
        >
      </p>
    </div>
    <div class="alert alert-danger col-md-8 offset-2" v-if="error"> {{ errorDisplayText }}</div>


    <Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
      <div class="form-row">
        <div class="form-group col-md-8 offset-2">
          <label for="email"><strong>E-Mail-Adresse</strong></label>
          <Field as="input" name="email" type="email" class="form-control" id="email" />
          <small class="text-danger" v-if="errors.email">{{errors.email}}</small>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-8 offset-2">
          <label for="password"><strong>Passwort</strong></label>
          <Field type="password"  name="password" class="form-control" id="password" />
          <small class="text-danger" v-if="errors.password">{{errors.password}}</small>

        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-8 offset-2">
          <label for="confirmPassword"
          ><strong>Passwort wiederholen</strong></label
          >
          <Field type="password" name="confirmPassword" class="form-control" id="confirmPassword" />
          <small class="text-danger" v-if="errors.confirmPassword">{{errors.confirmPassword}}</small>

        </div>
      </div>
      <div class="form-row mt-3">
        <div class="form-group col-md-8 offset-2">
          <div class="d-grid">
            <button class="btn bg-vue">
              <span v-if="!isLoading">Registrieren</span>
              <span v-else class="spinner-border spinner-border-sm"></span>

            </button>
            <button class="btn bg-vue"
                    @click="keyCloakLogin"
            >
              <span v-if="!isLoading">Keycloak Login</span>
              <span v-else class="spinner-border spinner-border-sm"></span>
            </button>
          </div>
        </div>
      </div>
    </Form>
  </div>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  name: "RegiterUser",
  components: {
    Form,
    Field
  },
  emits: {
    'change-component': (componentName) => {
      if(componentName.componentName !== "LoginUser") {
        return false;
      }
      return true;
    }
  },  data() {
    const schema = yup.object().shape({
      email: yup.string()
          .required("E-Mail Adresse wird benötigt")
          .trim()
          .email("Das ist keine gültige E-Mail-Adresse"),
      password: yup.string()
          .required("Ein Passwort wird benötigt")
          .trim()
          .min(6, "Das Passwort muss mindestens 6 Zeichen lang sein"),
      confirmPassword: yup.string().required("Bitte wiederholen Sie Ihr Passwort")
          .oneOf([yup.ref("password")], "Passwörter stimmen nicht überein")
    });
    return {
      schema,
      error: "",
      isLoading: false
    };
  },
  computed: {
    errorDisplayText() {
      if(this.error) {
        if(this.error.includes("EMAIL_EXISTS")) {
          return "Die E-Mail Adresse existiert bereits."
        }
      }
      return "Es ist ein Fehler aufgetreten"
    }
  },
  methods: {
    keyCloakLogin() {
      this.$store.dispatch("login", {

      })
    },
    submitData(values) {
      console.log(values);
      this.isLoading = true;
      this.error = "";
      this.$store.dispatch("signup", {
        email: values.email,
        password: values.password
      })      .then(()=> {
        this.isLoading = false;
        console.log(this.$store.state);
        this.changeComponent("LoginUser")
      })
          .catch((error) => {
                this.error = error.message;
                this.isLoading = false;
              }
          )
    },
    changeComponent(componentName) {
      this.$emit("change-component", {componentName})
      ;
    },
  }

}
</script>

<style scoped>

</style>