<template>
  <div>
    <b-row>
      <b-col cols="12" lg="6" class="mb-2">
        <b-skeleton v-if="loadingState" class="col-9" width="80%" height="25px" />
        <h4 v-else class="m-0 mb-2 text-black text-capitalize">{{ getVoucherDetails.campaign_name }}</h4>

        <b-row v-if="getVoucherDetails.voucher_no" class="mb-1">
          <b-col cols="auto">{{ $t('Common.Voucher.VoucherNo') }}</b-col>
          <b-col class="font-weight-bold pl-0">{{ getVoucherDetails.voucher_no }}</b-col>
        </b-row>

        <b-row v-if="getVoucherDetails.expiry_date" class="mb-1">
          <b-col cols="auto">{{ $t('Common.ExpiryDate') }}</b-col>
          <b-col class="font-weight-bold pl-0">{{ getVoucherDetails.expiry_date }}</b-col>
        </b-row>
      </b-col>

      <b-col cols="12" lg="6">
        <b-row class="text-lg-right">
          <b-col cols="12" lg="7">
            <b-row class="mb-1">
              <b-col cols="auto" lg="12">
                {{ $t('Itoken.Redemption.AvailableVoucherPoints') }}
              </b-col>

              <b-col v-if="loadingState"><b-skeleton /></b-col>
              <b-col v-else class="font-weight-bold pl-0 font-size-lg-4">
                {{ getVoucherDetails.voucher_points }}
              </b-col>
            </b-row>
          </b-col>

          <b-col cols="12" lg="5">
            <b-row class="mb-1">
              <b-col cols="auto" lg="12">
                {{ $t('Itoken.Redemption.RemainingVoucherPoints') }}
              </b-col>

              <b-col v-if="loadingState"><b-skeleton /></b-col>
              <b-col
                v-else
                :class="[{ 'text-danger': getRemainingPoints < 0 }, 'font-weight-bold', 'pl-0', 'font-size-lg-4']"
              >
                {{ getRemainingPoints }}
              </b-col>
            </b-row>
          </b-col>
        </b-row>
      </b-col>

      <b-col class="m-3 border-light border-bottom-double" />
    </b-row>

    <b-row>
      <b-col class="mb-3">
        <div v-if="loadingState">
          <b-skeleton-img no-aspect height="100px" />
        </div>

        <div v-else-if="getProductList.length === 0" class="text-danger">
          {{ $t('Eshop.Product.NotFound') }}
        </div>

        <div v-else class="animated fadeIn">
          <b-row>
            <b-col cols="12" md="6" lg="4" class="ml-auto mb-3">
              <text-search-bar
                v-model="productFilterText"
                :data-qa-prefix="`${dataQaPrefix}-iTokenRedeemProductList`"
              />
            </b-col>
          </b-row>

          <template v-for="(product, index) in getProductList">
            <b-row
              v-show="
                product.name.toLowerCase().includes(productFilterText.toLowerCase()) ||
                  product.sku.toLowerCase().includes(productFilterText.toLowerCase())
              "
              :key="index"
              class="m-0 mb-3 pb-3 border-bottom animated slideInUp"
            >
              <b-col cols="3" md="2" class="px-0">
                <b-img
                  fluid
                  center
                  rounded=""
                  blank-color="lightgray"
                  class="object-fit-scale-down border"
                  :src="product.image || imagePlaceHolder"
                  :alt="`${product.name} ${$t('Common.Image.Label')}`.toLowerCase()"
                />
              </b-col>

              <b-col>
                <div>
                  <div class="font-weight-bold font-size-5">{{ product.name }}</div>
                  <div class="mb-3">{{ product.sku }}</div>

                  <b-row>
                    <b-col cols="12" md="auto" class="mb-2 mb-md-0">
                      <div>
                        <span class="pr-2">{{ $t('Itoken.Redemption.Product.UnitPoints') }}</span>
                        <span class="font-weight-bold">{{ product.unit_point }}</span>
                      </div>

                      <div>
                        <span class="pr-2">{{ $t('Itoken.Redemption.Product.MaxRedeemQty') }}</span>
                        <span class="font-weight-bold">{{ product.max_quantity }}</span>
                      </div>

                      <div>
                        <span class="pr-2">{{ $t('Common.Sales.UnitPrice') }}</span>
                        <span class="font-weight-bold">
                          {{ getVoucherDetails.currency_code }}
                          {{ product.price || '0.00' }}
                        </span>
                      </div>
                    </b-col>

                    <b-col cols="auto" class="ml-md-auto">
                      <eshop-product-quantity-selector
                        v-if="showQuantitySelector"
                        force-show-quantity-selector
                        :pill="$appSettings.evo.enable"
                        :max-range="product.max_quantity || 0"
                        :quantity="productQuantityGetter(product.id)"
                        @update="qty => updateProductQuantity(product, qty)"
                        :data-qa-prefix="`${dataQaPrefix}-iTokenRedeemProductList-${product.sku.toLowerCase()}`"
                      />
                    </b-col>
                  </b-row>
                </div>
              </b-col>
            </b-row>
          </template>

          <b-row class="m-0">
            <b-col cols="12" class="text-right">
              <span class="pr-2 text-capitalize">{{ $t('Itoken.Redemption.TotalPoints') }}</span>
              <span class="font-weight-bold font-size-5">{{ getTotalPointsRedeemed }}</span>
            </b-col>

            <b-col v-if="getRemainingPoints < 0" cols="12" class="text-danger text-right">
              {{ $t('Itoken.Redemption.Error.InSufficientPoints.HelpText') }}
            </b-col>
          </b-row>
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ImagePlaceholder from '@/assets/img/image-placeholder.svg'
import TextSearchBar from '@/app/_global/components/elements/TextSearchBar'
import EshopProductQuantitySelector from '@/app/_global/components/blocks/EshopProductQuantitySelector'

export default {
  name: 'ITokenVoucherDetails',
  components: { TextSearchBar, EshopProductQuantitySelector },
  props: {
    isBusy: { type: Boolean, default: false },
    voucherDetails: { type: Object, required: true },
    totalRedeemedPoints: { type: Number, required: true },
    productQuantityGetter: { type: Function, required: true },
    addToCartCallBack: { type: Function, required: true },
    dataQaPrefix: { type: String, required: true },
    showQuantitySelector: { type: Boolean, default: true },
  },
  data() {
    return {
      productFilterText: '',
      imagePlaceHolder: ImagePlaceholder,
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getVoucherDetails() {
      return this.voucherDetails
    },
    getProductList() {
      return this.getVoucherDetails.items || []
    },
    getTotalPointsRedeemed() {
      return this.totalRedeemedPoints
    },
    getRemainingPoints() {
      return (this.getVoucherDetails.voucher_points || 0) - this.getTotalPointsRedeemed
    },
    loadingState() {
      return this.isBusy
    },
  },
  methods: {
    async updateProductQuantity(item, qty) {
      await this.addToCartCallBack({
        ...item,
        quantity: qty,
      })
    },
  },
}
</script>
