<template>
  <div class="row justify-content-center">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Security & Sensitive Information</h4>
          <p class="card-title-desc">
            Update your security and sensitive information to ensure your account stays
            current.
          </p>
          <b-form @submit.prevent="formSubmit">
            <div class="row">
              <div class="col-md-4">
                <b-form-group
                  class="mb-3"
                  label="Email Address"
                  label-for="formrow-email-input"
                >
                  <b-form-input
                    id="formrow-email-input"
                    type="email"
                    placeholder="Enter a valid email"
                    v-model="form.email"
                    name="email"
                    :class="{ 'is-invalid': submitted && v$.form.email.$error }"
                  ></b-form-input>
                  <div v-if="submitted && v$.form.email.$error" class="invalid-feedback">
                    <span v-if="!v$.form.email.required">This value is required.</span>
                    <span v-else-if="!v$.form.email.email"
                      >Please provide a valid email.</span
                    >
                  </div>
                </b-form-group>
              </div>
              <div class="col-md-4">
                <b-form-group
                  class="mb-3"
                  label="Mobile number"
                  label-for="formrow-mobileNumber-input"
                >
                  <b-form-input
                    id="formrow-mobileNumber-input"
                    type="text"
                    placeholder="Enter valid mobile number"
                    v-model="form.mobileNumber"
                    name="mobileNumber"
                    :class="{ 'is-invalid': submitted && v$.form.mobileNumber.$error }"
                  ></b-form-input>
                  <div
                    v-if="submitted && v$.form.mobileNumber.$error"
                    class="invalid-feedback"
                  >
                    <span v-if="!v$.form.mobileNumber.required"
                      >This value is required.</span
                    >
                    <span v-else-if="!v$.form.mobileNumber.phoneNumer">{{
                      formvalidationMessages.phoneNumerValidatorMessage
                    }}</span>
                  </div>
                </b-form-group>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <b-form-group
                  class="mb-3"
                  label="New Password (optional)"
                  label-for="formrow-newpassword-input"
                >
                  <b-form-input
                    id="formrow-newpassword-input"
                    type="password"
                    placeholder="Enter a new password"
                    v-model="form.newpassword"
                    name="newpassword"
                    :class="{ 'is-invalid': submitted && v$.form.newpassword.$error }"
                  ></b-form-input>
                  <div
                    v-if="submitted && v$.form.newpassword.$error"
                    class="invalid-feedback"
                  >
                    <span v-if="v$.form.newpassword.required"
                      >This value is required.</span
                    >
                  </div>
                </b-form-group>
              </div>
              <div class="col-md-4">
                <b-form-group
                  class="mb-3"
                  label="Confirm New Password"
                  label-for="formrow-confirmPassword-input"
                >
                  <!-- <b-form-input
                    id="formrow-confirmPassword-input"
                    type="password"
                    placeholder="Re-enter new password"
                    v-model="form.confirmPassword"
                    name="confirmPassword"
                    :class="{ 'is-invalid': submitted && v$.form.confirmPassword.$error|| (submitted&&!form.confirmPassword) }"
                  ></b-form-input> -->
                 
                  <b-form-input
                  id="formrow-confirmPassword-input"
                  type="password"
                  placeholder="Re-enter new password"
                  v-model="form.confirmPassword"
                  name="confirmPassword"
                  :class="{ 'is-invalid': submitted && !passwordsDoNotMatch }"
                ></b-form-input>
                  <div
                    v-if="!passwordsDoNotMatch"
                    class="invalid-feedback"
                  >
                    
                    <span v-if="!passwordsDoNotMatch"
                      >The value should be the same as the password.</span
                    >
                  </div>
                </b-form-group>
              </div>
            </div>

            <div>
              <b-button variant="primary" type="submit">
                <i
                  class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                  v-if="updateProfileSecurityInfoLoading"
                ></i>
                Save
              </b-button>
              <b-button variant="light" @click="resetForm">Cancel</b-button>
            </div>
          </b-form>
        </div>
      </div>
    </div>
    <b-modal
    id="modal-standard"
      title="Confirm Password"
      title-class="font-18"
      v-model="modalShow"
    >
      <b-form @submit.prevent="modalformSubmit" id="modalFormPassword">
        <b-form-group
          class="mb-3"
          label="Password"
          label-for="formrow-modalpassword-input"
        >
          <b-form-input
            id="formrow-modalpassword-input"
            type="password"
            placeholder="Enter password"
            v-model="modalform.password"
            name="modalpassword"
            :class="{ 'is-invalid': modalFormSubmitted && v$.modalform.password.$error }"
          ></b-form-input>
          <div
            v-if="modalFormSubmitted && v$.modalform.password.$error"
            class="invalid-feedback"
          >
            <span v-if="!v$.modalform.password.required">This value is required.</span>
          </div>
        </b-form-group>
      </b-form>
      <template #modal-footer="{ close }">
        <button type="button" class="btn btn-light" @click="close">Cancels</button>
        <button type="button" class="btn btn-primary" @click="modalSubmitClicked">
          <i
            class="bx bx-loader bx-spin font-size-16 align-middle me-2"
            v-if="updateProfileSecurityInfoLoading"
          ></i>
          Confirm
        </button>
      </template>
    </b-modal>
  </div>
</template>

<script>
import { formvalidation, formvalidationMessages } from "../../utils/util";
import { useVuelidate } from "@vuelidate/core";
import { required, requiredIf, email, sameAs } from "@vuelidate/validators";
const { phoneNumerValidator, passwordvalidator } = formvalidation;
import { BForm, BModal, BFormGroup, BFormInput, BButton } from "bootstrap-vue-next";

export default {
  components: {
    BForm,
    BModal,
    BFormGroup,
    BFormInput,
    BButton,
  },
  props: {
    profileData: {
      type: Object,
      required: true,
    },
    updateProfileSecurityInfoLoading: {
      type: Boolean,
      required: true,
    },
    securityInfoModalClose: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      modalShow: false,
      formvalidationMessages,
      form: {
        email: this.profileData.email,
        mobileNumber: this.profileData.mobileNumber,
        newpassword: "",
        confirmPassword: "",
      },
      modalform: {
        passowrd: "",
      },
      submitted: false,
      modalFormSubmitted: false,
      passwordsDoNotMatch:false
    };
  },
  computed:
  {
    passwordsDoNotMatch() {
      //return this.form.password !== this.form.confirmPassword && this.form.confirmPassword !== '';
      if(this.form.confirmPassword !== '')
      {
        if(this.form.newpassword===this.form.confirmPassword)
        {
          return true
        }
        else{
          return false
        }      
       
      }else{
        return false
      }
    },
    passwordValidationFeedback() {
      if (this.submitted && this.form.password === '') {
        return 'Password is required.';
      }
      return null;
    },
    confirmPasswordValidationFeedback() {
      if (this.submitted && this.form.confirmPassword === '') {
        return 'Please confirm your password.';
      } else if (this.passwordsDoNotMatch) {
        return 'Passwords do not match.';
      }
      return null;
    }
  },

  setup() {
    const v$ = useVuelidate({
      form: {
        email: { required, email },
        mobileNumber: { required, phoneNumerValidator },
        newpassword: { required },
        confirmPassword: {
        required,
        sameAsPassword: sameAs(function () {
          return this.form.newpassword;
        }) 
      },
      },
    });

    return { v$ };
  },
  validations: {
    modalform: {
      passowrd: {
        required,
      },
    },
    form: {
      email: { required, email },
      mobileNumber: { required, phoneNumerValidator },
      newpassword: { required },
      confirmPassword: {
        required,
        sameAsPassword: sameAs(function () {
          return this.form.newpassword;
        }) 
      }
    }
  },
  methods: {
    formSubmit() {
      this.submitted = true;
      this.v$.form.$touch();

      if(this.form.email &&this.form.mobileNumber && this.form.newpassword &&this.form.confirmPassword)
      {
        if(this.form.newpassword===this.form.confirmPassword)
        {
          this.modalShow = true;
        }
        else{
          return;
        }
        
      }
      else{
        return;
      }

     // if (this.v$.form.$invalid) {
      //   return;
      // }
    
    },
    modalSubmitClicked(e) {
      e.preventDefault();
      this.modalformSubmit();
    },
    modalformSubmit() {
      console.log("modalformSubmit", postRequest);
      this.modalFormSubmitted = true;
      this.v$.modalform.$touch();
      console.log("formsubmit", postRequest);
      if (this.v$.modalform.$invalid) {
        return;
      }
      let postRequest = {
        email: this.form.email,
        mobileNumber: "+1" + this.form.mobileNumber.replace(/\(|\)|-|\.|\s|(\+1)/g, ""),
        password: this.modalform.passowrd,
      };
      if (this.form.newpassword) {
        postRequest.newpassword = this.form.newpassword;
      }

       this.$emit("formSubmit", postRequest);
    },
    resetForm() {
      this.form = {
        email: this.profileData.email,
        mobileNumber: this.profileData.mobileNumber,
        newpassword: "",
        confirmPasssowrd: "",
      };
    },
  },
  watch: {
    securityInfoModalClose(v) {
      if (v === true) {
        this.modalShow = false;
        this.$emit("resetSecurityInfoModalClose");
      }
    },
  },
};
</script>