<template>
  <t-modal
    v-model="vModel"
    id="_password-guard-modal"
    :clickToClose="clickToClose"
    @before-open="onBeforeOpen"
    @closed="onClosed"
    class="_modal-overlay"
    :style="{
      zIndex: zIndex
    }"
  >

    <!-- Password guard icon -->
    <p class="text-center mb-8">
      <v-icon name="lock" scale="5"/>
    </p>

    <!-- Text content -->
    <i18n path="modals.passwordGuardModal.text1" tag="p" class="mb-4">
      <!-- ref {0} -->
      <br>
    </i18n>

    <!-- Password input -->
    <InputPassword
      v-model="passwordValue"
      name="password"
      :variant="passwordValue.length > 0 ? 'tertiary' : 'tertiary-error'"
      :state="passwordValue.length > 0"
      :placeholder="$h.capitalize($t('models.user.password'))"
      required
      fluid
    />

    <!-- Footer -->
    <template v-slot:footer>
      <div class="flex justify-center">
        <Button
          variant="action"
          @click.native="handleOk"
          :disabled="!(passwordValue.length > 0)"
          class="mx-2"
        >
          {{ $t('global.confirm') | capitalize }}
        </Button>
        <Button
          variant="error"
          @click.native="vModel = false"
          class="mx-2"
        >
          {{ $t('global.cancel') | capitalize }}
        </Button>
      </div>
    </template>

  </t-modal>

</template>

<script>
// vuex helpers
import { mapState } from 'vuex'
// BaseModal component
import BaseModal from './BaseModal'
/**
 * PasswordGuardModal component
 */
export default {
  name: 'PasswordGuardModal',
  extends: BaseModal,
  data () {
    return {
      clickToClose: false
    }
  },
  computed: {
    // Map state from 'Core/Auth' module
    ...mapState('Core/Auth', [
      'passwordForSecurity'
    ]),
    /**
     * passwordValue
     */
    passwordValue: {
      get () { return this.passwordForSecurity },
      set (newValue) { this.$store.commit('Core/Auth/SET_PASSWORD_FOR_SECURITY', newValue) }
    }
  },
  methods: {
    /**
     * Called before popup open
     * @return {void}
     */
    onBeforeOpen: function () {
      // Force reset on before open
      this.$store.commit('Core/Auth/RESET_PASSWORD_FOR_SECURITY')
    },
    /**
     * Called when click on confirm button
     * @return {void}
     */
    handleOk: function () {
      this.$root.emit('PASSWORD_SECURITY_CONFIRMED')
      this.vModel = false
    },
    /**
     * Called when popup close
     * @return {void}
     */
    onClosed: function () {
      this.$root.off('PASSWORD_SECURITY_CONFIRMED')
    }
  }
}
</script>

<style lang="scss">
#_password-guard-modal {
  //
}
</style>
