<template>
  <modal-template :id="modalId" size="md" is-footer-hide :no-close-on-esc="false" :no-close-on-backdrop="false">
    <template v-slot:title>
      <span class="text-capitalize">{{ $t('Eshop.CommissionEntitlement') }}</span>
    </template>

    <template v-slot:body>
      <h5 v-if="commissionsEntitlement.error && !isBusy" class="text-black my-5 text-center">
        {{ $t('Common.RecordNotFound') }}
      </h5>

      <div v-else class="font-weight-bolder text-black-50">
        <div class="rounded-3 bg-gray-200 p-3">
          <div class="mb-2">{{ $t('Eshop.CommissionEntitlement.TotalPoints') }} :</div>

          <div>
            <b-skeleton v-if="isBusy" width="200px" />
            <b-row v-else>
              <b-col cols="3" lg="2">{{ $t('Common.Terminology.Bv') }}</b-col>
              <b-col>
                {{ commissionsEntitlement.bv_value }} x {{ commissionsEntitlement.months }}
                {{ $t('Eshop.Product.Tenure') }}
              </b-col>
            </b-row>
          </div>

          <div>
            <b-skeleton v-if="isBusy" width="200px" />
            <b-row v-else>
              <b-col cols="3" lg="2">{{ $t('Common.Terminology.Sv') }}</b-col>
              <b-col>
                {{ commissionsEntitlement.sv_value }} x {{ commissionsEntitlement.months }}
                {{ $t('Eshop.Product.Tenure') }}
              </b-col>
            </b-row>
          </div>
        </div>

        <div class="p-3">
          <div class="mb-2">{{ $t('Eshop.CommissionEntitlement.CbpPointBreakDown') }}</div>

          <div>
            <b-skeleton-table v-if="isBusy" :rows="5" :columns="2" hide-header :table-props="{ borderless: true }" />
            <b-row v-else>
              <b-col
                :md="getCbpPointsAllocation().length > 1 ? 6 : 12"
                :class="{ 'border-md-right': getCbpPointsAllocation().length > 1 }"
              >
                <b-row v-for="(cbp, index) in getCbpPointsAllocation('l')" :key="index" class="mb-2">
                  <b-col cols="auto">{{ cbp.cbp_point }}</b-col>
                  <b-col class="text-right">{{ cbp.cw_month_display }}</b-col>
                </b-row>
              </b-col>
              <b-col>
                <b-row v-for="(cbp, index) in getCbpPointsAllocation('r')" :key="index" class="mb-2">
                  <b-col cols="auto">{{ cbp.cbp_point }}</b-col>
                  <b-col class="text-right">{{ cbp.cw_month_display }}</b-col>
                </b-row>
              </b-col>
            </b-row>
          </div>
        </div>
      </div>
    </template>
  </modal-template>
</template>

<script>
import ModalTemplate from '@/elements/common/components/modalTemplate'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'ProductCommissionEntitlementModal',
  components: { ModalTemplate },
  data() {
    return {
      modalId: 'commissionEntitlement',
      commissionsEntitlement: {},
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    isBusy() {
      return this.isLoading('loadingCbpBreakdown')
    },
    getCbpPointsAllocation: vue => pos => {
      let cbpPoints = vue.commissionsEntitlement.cbp_points || []
      let medium = cbpPoints.length / 2
      return (pos === 'l' && cbpPoints.slice(0, medium)) || (pos === 'r' && cbpPoints.slice(medium)) || cbpPoints
    },
  },
  methods: {
    ...mapActions('eshop', ['loadProductCbpBreakDown']),
    show(kittingId) {
      this.commissionsEntitlement = {}
      if (kittingId !== undefined) {
        this.loadProductCbpBreakDown(kittingId).then(result => {
          this.commissionsEntitlement = { ...result }
        })
        this.$bvModal.show(this.modalId)
      }
    },
  },
}
</script>
