<template>
  <b-card>
    <b-row>
      <b-col cols="7" md="auto">
        <div class="font-weight-bold">{{ getProductDetails.name }}</div>
        <div class="mb-2">{{ getProductDetails.sku }}</div>

        <div class="mb-2">
          <b-row>
            <b-col cols="auto">
              <span class="pr-1">{{ $t('Common.Terminology.Bv') }}</span>
              <span class="text-primary">{{ getProductDetails.total_bv_transferable || '0.00' }}</span>
            </b-col>
            <b-col cols="auto">
              <span class="pr-1">{{ $t('Common.Terminology.Sv') }}</span>
              <span class="text-primary">{{ getProductDetails.total_sv_transferable || '0' }}</span>
            </b-col>
            <b-col cols="auto">
              <span class="pr-1">{{ $t('Common.Terminology.Cbp') }}</span>
              <span class="text-primary">{{ getProductDetails.total_cbp_point_transferable || '0.0000' }}</span>
            </b-col>
          </b-row>
        </div>

        <div>
          <div class="border-dashed p-2 bg-note d-inline-block">
            <div class="mb-1">{{ $t('SvTransfer.Creation.Transferred') }}:</div>
            <b-row>
              <b-col cols="auto">
                <span class="pr-1">{{ $t('Common.Terminology.Bv') }}</span>
                <span class="text-primary">{{ getProductDetails.total_bv_transferred || '0.00' }}</span>
              </b-col>
              <b-col cols="auto">
                <span class="pr-1">{{ $t('Common.Terminology.Sv') }}</span>
                <span class="text-primary">{{ getProductDetails.total_sv_transferred || '0' }}</span>
              </b-col>
              <b-col cols="auto">
                <span class="pr-1">{{ $t('Common.Terminology.Cbp') }}</span>
                <span class="text-primary">{{ getProductDetails.total_cbp_point_transferred || '0.0000' }}</span>
              </b-col>
            </b-row>
          </div>
        </div>
      </b-col>

      <b-col cols="5" md="3" lg="2" class="ml-auto">
        <b-form-group
          class="text-right"
          :label="$t('SvTransfer.Creation.TransferProductQuantity')"
          :state="!errors.has(`Transfer Quantity ${getProductDetails.id}`) && null"
          :invalid-feedback="errors.first(`Transfer Quantity ${getProductDetails.id}`)"
        >
          <b-select
            v-model="selectedQuantity"
            :options="getProductQuantityOptions"
            :name="`Transfer Quantity ${getProductDetails.id}`"
            :disabled="getProductDetails.quantity_transferable < 1"
            :data-vv-as="$t('SvTransfer.Creation.TransferProductQuantity')"
            v-validate="`max_value:${getProductDetails.quantity_transferable || 0}`"
            :state="!errors.has(`Transfer Quantity ${getProductDetails.id}`) && null"
            :data-qa="`${dataQaPrefix}-productCard-${getProductDetails.id}-transferQuantity-select`"
          />
        </b-form-group>
      </b-col>
    </b-row>
  </b-card>
</template>

<script>
export default {
  name: 'SvTransferProductCard',
  inject: ['$validator'],
  props: {
    quantity: { type: Number, default: 0 },
    readOnly: { type: Boolean, default: false },
    dataQaPrefix: { type: String, required: true },
    productDetails: { type: Object, required: true },
  },
  data() {
    return {
      selectedQuantity: 0,
    }
  },
  watch: {
    quantity: {
      handler(qty) {
        if (qty !== this.selectedQuantity) {
          this.selectedQuantity = qty
        }
      },
      immediate: true,
    },
  },
  computed: {
    getProductDetails() {
      return this.productDetails || {}
    },
    getProductQuantityOptions() {
      return [...Array((this.getProductDetails.quantity_transferable || 0) + 1).keys()]
    },
  },
  methods: {
    getData() {
      let { id, name, type, sku, bv, sv, cbp_point } = this.getProductDetails
      return { id, name, type, sku, bv, sv, cbp_point, quantity: this.selectedQuantity }
    },
  },
}
</script>
