<template>
  <b-card>
    <b-card-title title-tag="div">
      <h5 class="mt-0">{{ getCartTitle }}</h5>
      <div v-for="(error, errIdx) in errorBag" :key="errIdx" class="text-danger animated flash">
        {{ error }}
      </div>
    </b-card-title>
    <b-card-body class="p-0 product-container mb-2">
      <div class="custom-scroll-bar">
        <div :class="cartItemsWrapperClass" class="overflow-y-auto mb-2">
          <div
            v-for="(item, index) in getCartItemsSorted"
            class="p-2 animated fadeInUp"
            :class="itemClass(item, index)"
            :key="`product-cart-${index}-${item.product_id}-${item.kitting_id}`"
          >
            <div>
              <b-row no-gutters class="mb-2">
                <b-col>
                  <div class="font-weight-bolder">{{ item.name }}</div>
                  <div v-if="showSkuCode">{{ item.sku }}</div>
                </b-col>
                <b-col v-if="showRemoveItemBtn" cols="auto">
                  <b-button
                    v-if="!(item.starterKit || item.memberKit)"
                    class="pt-0 pr-0"
                    variant="link"
                    @click="updateProductQuantity(item, 0)"
                    :data-qa="`${dataQaPrefix}-productCart-${item.sku.toLowerCase()}-remove-product-btn`"
                  >
                    <icon name="eshop-remove" class="text-light icon-size-2" />
                  </b-button>
                </b-col>
              </b-row>
            </div>

            <div v-if="!(item.starterKit || item.memberKit)" class="font-weight-bold mb-2">
              <template>
                <b-row v-if="showItemBv" no-gutters>
                  <b-col>{{ $t('Common.Terminology.Bv') }}</b-col>
                  <b-col cols="auto" class="text-right text-primary">
                    <span v-if="item.rental_plan">
                      {{ item.rental_plan.cv_value }} x {{ item.rental_plan.number_cv }}
                      {{ $t('Eshop.Product.Tenure') }}
                    </span>
                    <span v-else>{{ item.total_cv.eligible }}</span>
                  </b-col>
                </b-row>

                <b-row v-if="showItemSv" no-gutters>
                  <b-col>{{ $t('Common.Terminology.Sv') }}</b-col>
                  <b-col cols="auto" class="text-right text-primary">
                    <span v-if="item.rental_plan">
                      {{ item.rental_plan.sv_value }} x {{ item.rental_plan.number_sv }}
                      {{ $t('Eshop.Product.Tenure') }}
                    </span>
                    <span v-else>{{ item.total_cv.sv }}</span>
                  </b-col>
                </b-row>

                <b-row v-if="showItemCbp" no-gutters>
                  <b-col>{{ $t('Common.Terminology.Cbp') }}</b-col>
                  <b-col cols="auto" class="text-right text-primary">
                    <span v-if="item.rental_plan">
                      {{ item.rental_plan.total_cbp_point }}
                    </span>
                    <span v-else>{{ item.total_cv.cbp_point }}</span>
                  </b-col>
                </b-row>

                <b-row v-if="showItemAmp && item.total_cv.amp" no-gutters>
                  <b-col>{{ $t('Common.Terminology.AmpCv') }}</b-col>
                  <b-col cols="auto" class="text-right text-primary">{{ item.total_cv.amp }}</b-col>
                </b-row>

                <b-row v-if="showItemWpBv && item.total_cv.welcome_pack" no-gutters>
                  <b-col>{{ $t('Common.Terminology.WpCv') }}</b-col>
                  <b-col cols="auto" class="text-right text-primary">
                    <span v-if="item.rental_plan">
                      {{ item.rental_plan.cv_value }} x {{ item.rental_plan.number_cv }}{{ $t('Eshop.Product.Tenure') }}
                    </span>
                    <span v-else>{{ item.total_cv.welcome_pack }}</span>
                  </b-col>
                </b-row>
              </template>
            </div>

            <div class="font-weight-bold">
              <b-row no-gutters>
                <b-col
                  v-if="!(item.starterKit || item.memberKit) && !item.rental_plan && !item.is_enrolment_item"
                  cols="auto"
                  class="align-self-end mr-1"
                >
                  <b-col>
                    <eshop-product-quantity-selector
                      :pill="pillQuantitySelector"
                      force-show-quantity-selector
                      @update="val => updateProductQuantity(item, val)"
                      :quantity-buttons-wrapper-class="['px-1']"
                      :small-quantity-selector="smallQuantitySelector"
                      :quantity="productQuantityGetter(item.product_id, item.kitting_id)"
                      :is-busy="isLoading('productsAddingToCart-' + item.product_id + '-' + item.kitting_id)"
                      :data-qa-prefix="`${dataQaPrefix}-productCart-${item.sku.toLowerCase()}`"
                    />
                  </b-col>
                </b-col>
                <b-col class="text-right align-self-end text-black">
                  <div v-if="item.rental_plan">
                    <div>
                      <span>
                        {{ currency }}
                        {{ item.rental_plan.initial_payment }}
                        ({{ $t('Eshop.Product.Initial') }})
                      </span>
                    </div>
                    <div>
                      <span>
                        {{ currency }}
                        {{ item.rental_plan.monthly_repayment }} x {{ item.rental_plan.month }}
                        {{ $t('Eshop.Product.Tenure') }}
                      </span>
                    </div>
                  </div>

                  <div v-else>
                    <span>
                      {{ currency }}
                      {{ $helpers.getCurrencyValue(item.total_price) }}
                    </span>
                  </div>
                </b-col>
              </b-row>
            </div>
          </div>
        </div>
      </div>

      <div class="border-top p-2 font-weight-bold" v-if="showTotalPoints">
        <b-row class="mb-2">
          <b-col class="text-uppercase">{{ $t('Common.Sales.Total') }}</b-col>
        </b-row>

        <slot name="total-points-allocation" />
      </div>

      <div class="border-top p-2 font-weight-bold" v-if="showTotalPrice">
        <b-row>
          <b-col cols="auto" class="text-uppercase align-self-center">
            <span class="pr-1">{{ $t('Common.Sales.Total') }}</span>
            <span class="text-black">{{ currency }}</span>
          </b-col>
          <b-col class="font-size-4 text-right text-black">{{ totalPrice }}</b-col>
        </b-row>
      </div>
    </b-card-body>

    <b-card-footer footer-bg-variant="white" footer-class="p-0 border-0">
      <slot name="footer" />
    </b-card-footer>
  </b-card>
</template>

<script>
import EshopProductQuantitySelector from '@/app/_global/components/blocks/EshopProductQuantitySelector'
import { mapGetters } from 'vuex'

export default {
  name: 'ProductCart',
  components: { EshopProductQuantitySelector },
  props: {
    title: { type: String, default: '' },
    cartItems: { type: Array, required: true },
    currency: { type: String, required: true },
    errorBag: { type: Array, default: () => [] },
    dataQaPrefix: { type: String, required: true },
    showSkuCode: { type: Boolean, default: true },
    showItemBv: { type: Boolean, default: false },
    showItemSv: { type: Boolean, default: false },
    showItemCbp: { type: Boolean, default: false },
    showItemWpBv: { type: Boolean, default: false },
    showItemAmp: { type: Boolean, default: false },
    showRemoveItemBtn: { type: Boolean, default: true },
    showTotalPoints: { type: Boolean, default: true },
    showTotalPrice: { type: Boolean, default: true },
    totalPrice: { type: [Number, String], required: true },
    processCartCallback: { type: Function, required: true },
    pillQuantitySelector: { type: Boolean, default: false },
    smallQuantitySelector: { type: Boolean, default: false },
    productQuantityGetter: { type: Function, required: true },
    cartItemsWrapperClass: { type: [String, Array], default: 'selected-item-list' },
  },

  computed: {
    ...mapGetters(['isLoading']),
    getCartTitle() {
      return this.title || this.$t('Common.Checkout.SelectProducts.HelpText')
    },
    getCartItemsSorted() {
      return [...this.cartItems].sort(item => (item.starterKit || item.memberKit ? -1 : 1))
    },
  },
  methods: {
    updateProductQuantity(product, qty) {
      this.processCartCallback({
        product_id: product.product_id,
        kitting_id: product.kitting_id,
        salesTypeId: product.eligible_sales_type.id,
        quantity: qty,
        custom: { isStarterKit: product.starterKit },
      })
    },
    itemClass(item, index) {
      let borderTop = true

      if (this.$appSettings.evo.enable) {
        let previousItem = this.$helpers.getValue(this.getCartItemsSorted, `[${index - 1}]`, {
          memberKit: true,
          starterKit: true,
        })

        borderTop = !(previousItem.memberKit || previousItem.starterKit)
      }

      return {
        'bg-light-extra': item.memberKit || item.starterKit,
        'rounded-2': (item.memberKit || item.starterKit) && this.$appSettings.evo.enable,
        'border-top': borderTop,
      }
    },
  },
}
</script>
