<template>
  <div>
    <b-row class="text-center ewallet-form-field">
      <b-col cols="12">
        <h1 class="mb-1">{{ getScreenDetails.title }}</h1>
        <p class="pre-wrap">{{ getScreenDetails.description }}</p>
      </b-col>

      <b-col cols="12" class="mt-4 mb-5">
        <b-row class="justify-content-center">
          <b-col cols="auto" class="mb-2">
            <div class="d-flex">
              <!--TODO: improve UX by limiting only numeric input-->
              <b-form-input
                maxlength="6"
                type="password"
                name="Security Pin"
                v-model="securityPin"
                v-validate="'required|digits:6'"
                class="rounded-1 text-center mr-2"
                :data-vv-as="$t('Common.Security.SecurityPin')"
                :state="!errors.has('Security Pin') && null"
                :data-qa="`${dataQaPrefix}-newPin-securityPin-input`"
              />

              <b-button
                id="security-pin-info"
                class="p-0"
                variant="link"
                :data-qa="`${dataQaPrefix}-newPin-securityPinTips-btn`"
              >
                <icon name="info-circle-icon" />
              </b-button>

              <b-popover
                variant="primary"
                triggers="hover focus"
                placement="bottomleft"
                target="security-pin-info"
                :title="$t('EWallet.Activation.TipsTitle')"
              >
                <ul class="pl-3">
                  <li>{{ $t('EWallet.Activation.Tips1') }}</li>
                  <li>{{ $t('EWallet.Activation.Tips2') }}</li>
                  <li>{{ $t('EWallet.Activation.Tips3') }}</li>
                </ul>
              </b-popover>
            </div>
          </b-col>

          <b-col cols="12" class="text-danger mb-2">
            <div v-if="errors.has('Security Pin')">{{ errors.first('Security Pin') }}</div>
            <div v-else class="text-black-50">{{ getScreenDetails.helpText }}</div>
          </b-col>
        </b-row>
      </b-col>

      <b-col cols="12" class="mt-auto">
        <slot />
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'EWalletNewPinForm',
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    isResetSecurityPin: { type: Boolean, default: false },
    dataQaPrefix: { type: String, required: true },
  },
  data() {
    return {
      securityPin: '',
    }
  },
  watch: {
    securityPin() {
      this.customError = ''
      this.$validator.reset()
    },
  },
  computed: {
    getScreenDetails() {
      return {
        title: this.$t((this.isResetSecurityPin && 'EWallet.ResetSecurityPin') || 'EWallet.SetupSecurityPin'),
        description: this.$t(
          (this.isResetSecurityPin && 'EWallet.ResetSecurityPin.Description') || 'EWallet.SetupSecurityPin.Description'
        ),
        helpText: this.$t(
          (this.isResetSecurityPin && 'EWallet.ResetSecurityPin.HelpText') || 'EWallet.SetupSecurityPin.HelpText'
        ),
      }
    },
  },
  methods: {
    async validateAndSubmit() {
      let self = this
      return await self.$validator.validate()
    },
    getComponentModelData() {
      return this.securityPin
    },
  },
}
</script>
