<template>
  <b-container class="px-0" @keyup.13="updatePassword">
    <b-alert variant="danger" v-if="!changePasswordStatus" show>
      {{ getErrorMessage }}
    </b-alert>
    <b-alert variant="danger" v-if="errSamePassword !== ''" show>
      {{ errSamePassword }}
    </b-alert>
    <b-row v-if="isChangePassword" class="my-3">
      <b-col cols="12" lg="5">
        <label class="required">
          {{ $t('MyAccount.ChangePassword.CurrentPassword') }}
        </label>
      </b-col>
      <b-col>
        <b-form-input
          v-model="currentPassword"
          type="password"
          v-if="isChangePassword"
          ref="currentPassword"
          name="Current Password"
          :placeholder="$t('MyAccount.ChangePassword.CurrentPassword')"
          :class="{ input: true, 'text-danger': errors.has('Current Password') && showValidationErrors }"
          v-validate="'required'"
        />
        <span v-show="errors.has('Current Password') && showValidationErrors" class="help text-danger">
          {{ errors.first('Current Password') }}
        </span>
      </b-col>
    </b-row>
    <b-row class="my-3">
      <b-col cols="12" lg="5" v-if="isChangePassword">
        <label class="required">
          {{ $t('MyAccount.ChangePassword.NewPassword') }}
        </label>
      </b-col>
      <b-col>
        <b-form-input
          v-model="newPassword"
          v-validate="'required|alpha_num|min:6|regex:^(.*[A-Z].*)'"
          :class="{ input: true, 'text-danger': errors.has('new_password') && showValidationErrors }"
          name="new_password"
          data-vv-as="New Password"
          type="password"
          ref="newPassword"
          :placeholder="$t('Login.LoginForm.NewPassword.Placeholder')"
        />
        <span v-show="errors.has('new_password') && showValidationErrors" class="help text-danger">
          {{ $t('Login.LoginForm.ResetPassword.Note') }}
        </span>
      </b-col>
    </b-row>
    <b-row class="my-3">
      <b-col cols="12" lg="5" v-if="isChangePassword">
        <label class="required text-nowrap">
          {{ $t('MyAccount.ChangePassword.RetypeNewPassword') }}
        </label>
      </b-col>
      <b-col>
        <b-form-input
          v-model="retypeNewPassword"
          v-validate="'required|confirmed:newPassword'"
          :class="{ input: true, 'text-danger': errors.has('Retype new password') && showValidationErrors }"
          id="confirm-new-password"
          name="Retype new password"
          data-vv-as="Confirm Password"
          type="password"
          ref="confirmNewPassword"
          :placeholder="$t('Login.LoginForm.ConfirmNewPassword.Placeholder')"
        />
        <span v-show="errors.has('Retype new password') && showValidationErrors" class="help text-danger">
          {{ errors.first('Retype new password') }}
        </span>
      </b-col>
    </b-row>
    <b-row class="my-3 float-right">
      <b-col>
        <b-button @click="updatePassword" @keyup.13="updatePassword" ref="submitButton" variant="primary w-100">
          <span v-if="isChangePassword">
            {{ $t('Login.LoginForm.ChangePassword') }}
          </span>
          <span v-else>
            {{ $t('Login.LoginForm.SendReset') }}
          </span>
        </b-button>
      </b-col>
    </b-row>
    <b-modal
      size="sm"
      ok-only
      hide-header
      no-close-on-esc
      no-close-on-backdrop
      class="eshop-model"
      ref="change_pwd_ok"
      centered
      @ok="closeMe"
    >
      <div>{{ $t('MyAccount.ChangePassword.Response.Success') }}</div>
      <div v-if="forceLogout"><br />{{ $t('Login.LoginForm.PleaseRelogin') }}</div>
    </b-modal>
  </b-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'ChangePassword',
  inject: ['$validator'],
  data() {
    return {
      newPassword: '',
      retypeNewPassword: '',
      changePasswordStatus: true,
      showValidationErrors: false,
      errSamePassword: '',
      currentPassword: '',
    }
  },
  props: {
    isChangePassword: {
      type: Boolean,
      default: true,
    },
    forceLogout: {
      type: Boolean,
      default: true,
    },
    redirect: {
      type: [Object, String],
      default: '',
    },
  },
  computed: {
    ...mapGetters(['getLoggedInUser', 'getErrors']),
    getErrorMessage() {
      if (this.getErrors('changePassword').current_password !== null) {
        return this.getErrors('changePassword').current_password[0]
      } else {
        return this.getErrors('changePassword')
      }
    },
  },
  methods: {
    ...mapActions(['changePassword', 'logoutUser']),
    updatePassword() {
      this.$validator.validateAll().then(valid => {
        this.showValidationErrors = true
        this.errSamePassword = ''
        if (valid) {
          if (this.currentPassword === this.newPassword) {
            this.errSamePassword = this.$t('MyAccount.ChangePassword.SamePassword.Message')
          } else {
            this.showValidationErrors = false
            let temp = {
              user_id: this.getLoggedInUser.id,
              currentPassword: this.currentPassword,
              newPassword: this.newPassword,
              retypeNewPassword: this.retypeNewPassword,
            }
            this.changePassword(temp).then(status => {
              this.changePasswordStatus = status
              if (status) {
                this.$refs.change_pwd_ok.show()
              }
            })
          }
        }
      })
    },
    closeMe() {
      if (this.forceLogout) {
        this.logoutUser()
      } else if (this.redirect) {
        this.$router.replace(this.redirect)
      }
    },
  },
}
</script>
