<template>
  <q-card class="q-ma-sm q-my-lg" elevated bordered>
    <q-card-section>
      <div class="text-h5 text-grey-8 text-bold text-center q-mb-sm">SIGN UP DOC EXAMS</div>
      <div
        class="text-body1 text-grey-8 text-center q-mb-xl"
      >Please fill this form to signing up OR you can also continue with social links!</div>
      <q-form ref="registerForm" @submit="onSubmitForm">
        <div class="row">
          <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
            <q-input
              outlined
              v-model="newRecord.firstName"
              dense
              type="text"
              label="First Name"
              placeholder="Please input first name"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type your first name']"
            />
          </div>
          <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
            <q-input
              outlined
              v-model="newRecord.lastName"
              dense
              type="text"
              label="Last Name"
              placeholder="Please input last name"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type your last name']"
            />
          </div>
        </div>

        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
          <q-input
            outlined
            v-model="newRecord.email"
            dense
            autocomplete="off"
            type="email"
            label="Email"
            placeholder="Enter email adress i.e ( abc@domain.com)"
            :error="email_error"
            :error-message="email_error_msg"
            lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please type your email']"
          />
        </div>
        <div class="row">
          <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
            <q-input
              v-model="newRecord.password"
              outlined
              dense
              :type="isPwd ? 'password' : 'text'"
              placeholder="Password"
              lazy-rules
              :rules="validatePassword"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
          </div>
          <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
            <q-input
              v-model="newRecord.password_confirmation"
              outlined
              dense
              :type="isConfirmPwd ? 'password' : 'text'"
              placeholder="Confirm Password"
              :rules="validateConfirmPassword"
            >
              <template v-slot:append>
                <q-icon
                  :name="isConfirmPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isConfirmPwd = !isConfirmPwd"
                />
              </template>
            </q-input>
          </div>
        </div>

        <div class="row justify-between">
          <div class="q-pa-sm">
            Need Help?
            <a href="/#/forgot">Forgot pasword</a>
          </div>
          <div
            class="text-caption text-grey-8 text-center q-py-md"
          >* By signing up, you indicate that you have read and agree to the Terms of Service, Honor Code and Privacy Policy.</div>
        </div>
        <div class="col-12 register-actions">
          <q-btn color="secondary" @click="navigateMode">Already have an account</q-btn>
          <q-btn :loading="isRequestInProgress" color="primary" type="submit" label="Sign Up">
            <template v-slot:loading>
              <q-spinner-hourglass class="on-left" />Registering..
            </template>
          </q-btn>
        </div>
      </q-form>
    </q-card-section>
    <q-card-section>
      <div class="row q-my-lg">
        <q-separator inset />
        <div class="or-separator">OR</div>
        <q-separator inset />
      </div>
      <div class="row q-my-md">
        <q-btn align="left" size="lg" class="full-width" color="blue-10">
          <i style="font-size: 30px; width: 40px;" class="fab fa-facebook-f sizing"></i>
          <q-separator vertical inset color="white" class="q-mx-md" />
          <span class="show">Continue with</span> facebook
        </q-btn>
      </div>
      <div class="row q-my-md">
        <q-btn align="left" size="lg" class="full-width" color="red-10">
          <i style="font-size: 30px; width: 40px;" class="fab fa-google-plus-g sizing"></i>
          <q-separator vertical inset color="white" class="q-mx-md" />
          <span class="show">Continue with</span> Google Plus
        </q-btn>
      </div>
      <div class="row q-my-md">
        <q-btn align="left" size="lg" class="full-width" color="light-blue-10">
          <i style="font-size: 30px; width: 40px;" class="fab fa-linkedin-in sizing"></i>
          <q-separator vertical inset color="white" class="q-mx-md" />
          <span class="show">Continue with</span> linkedin
        </q-btn>
      </div>
    </q-card-section>
  </q-card>
</template>
<script>
export default {
  data() {
    return {
      newRecord: {
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        password_confirmation: "",
      },
      isPwd: true,
      isConfirmPwd: true,
      isRequestInProgress: false,
      email_error: false,
      email_error_msg: null,
    };
  },
  computed: {
    validateConfirmPassword() {
      return [
        (val) =>
          val === this.newRecord.password ||
          "Password Confirmation doesn't match",
      ];
    },
    validatePassword() {
      return [
        (val) => {
          if (!val || val.length === 0) {
            return "Please type password";
          }
          if (val.length < 6) {
            return "password must be minimum 6 letters";
          }
          return true;
        },
      ];
    },
  },

  methods: {
    onSubmitForm: function () {
      this.$refs.registerForm.validate().then((success) => {
        if (success) {
          this.isRequestInProgress = true;
          this.$store
            .dispatch("auth/register", this.newRecord)
            .then((response) => {
              this.$q.notify({
                type: "success-notify",
                position: "right",
                message: "Success",
                caption: "Account registration successfull!!",
                actions: [
                  { label: "Dismiss", color: "yellow", handler: () => {} },
                ],
              });
              this.$router.push({
                name: "cart",
                query: { view: 3 } 
              });
            })
            .catch((error) => {
              if (error.response.status === 422) {
                if (error.response.data.errors.email) {
                  this.email_error = true;
                  this.email_error_msg = error.response.data.errors.email[0];
                }
                 this.$q.notify({
                type: "error-notify",
                position: "right",
                message: "Failed",
                caption:
                  "Please Fix the errors and try again...",
                actions: [
                  { label: "Dismiss", color: "yellow", handler: () => {} },
                ],
              });

              } else {
                this.email_error = false;
                this.email_error_msg = null;
              }

              this.isRequestInProgress = false;
            });
        }
      });
    },
     navigateMode:function(){
        this.$emit('toogleAuthMode',0);
    }
  },
  watch: {
    "newRecord.password": function (e) {
      if (e) {
        this.newRecord.password_confirmation = "";
      }
    },
  },
};
</script>
<style lang="css" scoped>
.show {
  display: inline-flex !important;
}
.hide {
  display: none;
}
.register-actions{
  display: flex;
  justify-content: flex-end;
}
.register-actions >a {
  margin-right: 5px;
}
.register-actions >button {
  width:30% !important;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .show {
    display: none !important;
  }
  .invisible {
    visibility: visible !important;
  }
}
</style>
