<template>
  <b-sidebar
    :id="id"
    lazy
    right
    backdrop
    :shadow="true"
    bg-variant="white"
    backdrop-variant="white"
    :sidebar-class="['cart']"
    :body-class="['custom-scroll-bar']"
    :header-class="['border-bottom', 'mb-2']"
    :title="$t('MyBundle.GenerateBundle.CartSideBar.Title')"
    @shown="getBundleListingData"
  >
    <div v-if="bundleListing.length" class="mh-100 overflow-y-auto">
      <div v-for="(item, index) in bundleListing" :key="index" class="m-3 border-bottom pb-2">
        <b-row class="m-0 mb-3">
          <b-col cols="11" class="px-0">
            <div class="font-weight-bold">{{ item.product_name }}</div>
            <div class="text-black-50">{{ item.product_sku }}</div>
          </b-col>
          <b-col cols="1" class="px-0">
            <b-button
              class="p-0"
              variant="link"
              @click="removeProduct(item)"
              :data-qa="`${dataQaPrefix}-myBundleCart-cartItem${item.product_sku}-removeItem-btn`"
            >
              <icon name="eshop-remove" class="text-light icon-size-3" />
            </b-button>
          </b-col>
        </b-row>
        <b-row class="m-0 align-items-end">
          <b-col class="px-0 eshop">
            <eshop-item-quantity
              :product-id="item.product_id"
              :kitting-id="item.kitting_id"
              :is-adding="quantityItemLoader"
              :get-custom-product-details="true"
              :sales-type-id="item.product_sale_type_id"
              :process-cart-callback="addProductCallBack"
              :quantity="productQuantityGetter(item.product_id, item.kitting_id)"
              :data-qa-prefix="`${dataQaPrefix}-myBundleCart-cartItem${item.product_sku.toLowerCase()}`"
              :custom-product-details="{
                sku: item.product_sku,
                name: item.product_name,
                prices: item.product_prices,
              }"
              @product-quantity-update="getBundleListingData"
            />
          </b-col>
          <b-col class="px-0 text-right">
            <span>{{ `${item.product_prices.gmp_price_tax} ${currencySymbol}` }}</span>
          </b-col>
        </b-row>
      </div>
    </div>

    <div v-else class="d-flex flex-column justify-content-center text-center h-100">
      <icon name="eshop-empty-cart" class="icon-size-5 text-light" />
      <div class="mt-2 font-weight-bold">{{ $t('Common.Cart.EmptyCart') }}</div>
    </div>

    <template v-slot:footer>
      <div class="border-y my-3 p-2">
        <h5 class="mb-0">{{ $t('Common.SubTotal') }}:</h5>
        <div class="d-flex flex-row pt-2">
          <div class="align-self-end">{{ $t('Common.Terminology.MemberPrice') }}</div>
          <div class="font-size-5 font-weight-bold text-right flex-grow-1">
            <span>{{ getPrice(subTotalPrice.memberPrice || 0) }}</span>
          </div>
        </div>
        <div class="d-flex flex-row pt-2">
          <div class="align-self-end">{{ $t('Common.Terminology.RetailPrice') }}</div>
          <div class="font-size-5 font-weight-bold text-right flex-grow-1">
            <span>{{ getPrice(subTotalPrice.retailPrice || 0) }}</span>
          </div>
        </div>
      </div>

      <b-button
        block
        squared
        variant="primary"
        @click="checkoutAction"
        class="py-3 text-uppercase font-size-4"
        :disabled="!productList.length || checkoutLoader"
        :data-qa="`${dataQaPrefix}-myBundleCart-checkout-btn`"
      >
        <b-spinner variant="white" v-show="checkoutLoader" class="mr-2" />
        <span>{{ actionButtonText || $t('Common.Sales.PreCheckout') }}</span>
      </b-button>
    </template>
  </b-sidebar>
</template>

<script>
import EshopItemQuantity from '@/app/_global/components/elements/EshopItemQuantity'
export default {
  name: 'MyBundleCart',
  components: { EshopItemQuantity },
  props: {
    id: { type: String, required: true },
    dataQaPrefix: { type: String, required: true },
    productList: { type: Array, default: () => [] },
    actionButtonText: { type: String, default: '' },
    currencySymbol: { type: String, required: true },
    checkoutLoader: { type: Boolean, default: false },
    checkoutAction: { type: Function, required: true },
    quantityItemLoader: { type: Boolean, default: false },
    addProductCallBack: { type: Function, required: true },
    productQuantityGetter: { type: Function, required: true },
    removeProductCallBack: { type: Function, required: true },
    subTotalPrice: { type: Object, default: () => ({ memberPrice: 0, retailPrice: 0 }) },
  },
  data() {
    return {
      bundleListing: [],
    }
  },
  methods: {
    getBundleListingData() {
      this.bundleListing = [...this.productList]
    },
    removeProduct(item) {
      let self = this
      Promise.resolve(self.removeProductCallBack(item)).then(() => {
        self.getBundleListingData()
      })
    },
    getPrice(price) {
      price = price.toString()
      if (price === '0' || price === '0.00') {
        return '-'
      } else {
        return `${this.$helpers.getCurrencyValue(price)} ${this.currencySymbol}`
      }
    },
  },
}
</script>
