<template>
  <form data-vv-scope="addCardForm" :class="wrapperClass">
    <div class="slideInDown animated">
      <h5 v-if="!hideTitle" class="pb-2 text-black">{{ $t('Card.AddNewCard.Label') }}</h5>
      <!--    Card Type-->
      <div v-if="cardTypeSelectingOption">
        <b-form-group :label="$t('Card.CardType.Label')" label-for="cardType" class="required">
          <b-form-select
            :data-vv-as="$t('Card.CardType.Label')"
            id="cardType"
            name="CardType"
            v-validate="'required'"
            :options="cardList"
            v-model="card.card_type"
            class="mb-2"
            :class="{ 'border-danger': errors.has('addCardForm.CardType') }"
            data-qa="card-type-select"
          />
          <span v-show="errors.has('addCardForm.CardType')" class="text-danger text-nowrap">
            {{ errors.first('addCardForm.CardType') }}
          </span>
        </b-form-group>
      </div>
      <!--    Issue Bank-->
      <div v-if="!crossCountryBanking">
        <b-form-group :label="$t('Card.IssueBank.Label')" label-for="issueBank" class="required">
          <b-form-select
            :data-vv-as="$t('Card.IssueBank.Label')"
            id="issueBank"
            name="IssueBank"
            v-validate="'required'"
            :options="bankList"
            v-model="card.issue_bank_info"
            class="mb-2"
            :class="{ 'border-danger': errors.has('addCardForm.IssueBank') }"
            data-qa="issue-bank-select"
          />
          <span v-show="errors.has('addCardForm.IssueBank')" class="text-danger text-nowrap">
            {{ errors.first('addCardForm.IssueBank') }}
          </span>
        </b-form-group>
      </div>
      <!--    Cardholder Name-->
      <div>
        <b-form-group :label="$t('Card.CardHolderName.Label')" label-for="cardholderName" class="required">
          <b-form-input
            trim
            :data-vv-as="$t('Card.CardHolderName.Label')"
            id="cardholderName"
            name="CardholderName"
            v-validate="'required'"
            v-model="card.card_holder_name"
            class="mb-2"
            :class="{ 'border-danger': errors.has('addCardForm.CardholderName') }"
            data-qa="cardholder-name-field"
          />
          <span v-show="errors.has('addCardForm.CardholderName')" class="text-danger text-nowrap">
            {{ errors.first('addCardForm.CardholderName') }}
          </span>
        </b-form-group>
      </div>
      <!--    Card Number-->
      <div>
        <b-form-group :label="$t('Card.CardNumber.Label')" label-for="cardNumber" class="required">
          <b-form-input
            :data-vv-as="$t('Card.CardNumber.Label')"
            id="cardNumber"
            name="CardNumber"
            v-validate="'required|credit_card'"
            type="number"
            v-model="card.card_number"
            class="mb-2"
            :class="{ 'border-danger': errors.has('addCardForm.CardNumber') }"
            data-qa="card-number-field"
          />
          <span v-show="errors.has('addCardForm.CardNumber')" class="text-danger text-nowrap">
            {{ errors.first('addCardForm.CardNumber') }}
          </span>
        </b-form-group>
      </div>
      <!--    Expired Date-->
      <div>
        <b-form-group :label="$t('Card.ExpiredDate.Label')" label-for="expiredMonth" class="required">
          <b-form-select
            :data-vv-as="$t('Card.ExpiredMonth.Label')"
            id="expiredMonth"
            name="ExpiredMonth"
            class="col-lg-2 col-3 mb-2"
            v-model="expired_month"
            @change="generateExpiredDate"
            :options="monthList"
            v-validate="'required'"
            :class="{ 'border-danger': errors.has('addCardForm.ExpiredMonth') }"
            data-qa="expired-month-select"
          />
          <label class="font-size-5 mx-1 mx-md-2">/</label>
          <b-form-select
            :data-vv-as="$t('Card.ExpiredYear.Label')"
            id="expiredYear"
            name="ExpiredYear"
            v-validate="'required'"
            class="col-lg-2 col-3 mb-2"
            v-model="expired_year"
            @change="generateExpiredDate"
            :options="yearList"
            :class="{ 'border-danger': errors.has('addCardForm.ExpiredYear') }"
            data-qa="expired-year-select"
          />
          <b-row>
            <b-col cols="12">
              <span v-show="errors.has('addCardForm.ExpiredMonth')" class="text-danger text-nowrap">
                {{ errors.first('addCardForm.ExpiredMonth') }}
              </span>
            </b-col>
            <b-col cols="12">
              <span v-show="errors.has('addCardForm.ExpiredYear')" class="text-danger text-nowrap">
                {{ errors.first('addCardForm.ExpiredYear') }}
              </span>
            </b-col>
          </b-row>
        </b-form-group>
      </div>
    </div>
  </form>
</template>

<script>
import moment from 'moment'
import _ from 'lodash'

export default {
  name: 'AddNewCard',
  props: {
    bankList: { type: Array, default: () => [] },
    crossCountryBanking: { type: Boolean, default: false },
    cardTypeSelectingOption: { type: Boolean, default: true },
    hideTitle: { type: Boolean, default: false },
    wrapperClass: { type: [Array, String] },
    cardInfo: {
      type: [Object, Boolean],
      default: false,
    },
  },
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      card: {
        issue_bank_info: '',
        card_type: '',
        card_holder_name: '',
        card_number: '',
        card_expiry: '',
      },
      expired_month: '',
      expired_year: '',
      cardList: [
        { value: 'VISA', text: 'Visa' },
        { value: 'MASTER', text: 'Master' },
      ],
    }
  },
  computed: {
    monthList() {
      let list = []
      list.push({ value: '', text: 'mm', disabled: true })
      for (let i = 1; i <= 12; i++) {
        let data = i.toString().padStart(2, '0')
        list.push({ value: data, text: data })
      }
      return list
    },
    yearList() {
      let list = []
      list.push({ value: '', text: 'yy', disabled: true })
      for (let i = 0; i < 10; i++) {
        let data = moment()
          .add(i, 'year')
          .format('YY')
        list.push({ value: data, text: data })
      }
      return list
    },
  },
  methods: {
    generateExpiredDate() {
      if (this.expired_month !== '' && this.expired_year !== '') {
        this.card.card_expiry = [this.expired_month, this.expired_year].join('/')
      }
    },
  },
  watch: {
    cardInfo: {
      handler() {
        if (this.cardInfo) {
          let reassignExpDate = this.cardInfo.card_expiry.split('/')
          this.expired_month = reassignExpDate[0]
          this.expired_year = reassignExpDate[1]
          this.card = _.cloneDeep(this.cardInfo)
        }
      },
      deep: true,
      immediate: true,
    },
    card: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
    },
  },
}
</script>
