<template>
  <div class="page signup-page cart-view">
    <div class="container">
      <b-row align-h="end" class="mb-2" v-if="isLoggedIn">
        <b-col lg="6">
          <b-form-row class="controls-holder" align-h="end" align-v="center">
            <b-col cols="5" class="section-label">
              <label>
                {{ $t('3rdParty.Common.CheckoutCartItemAs') }}
              </label>
            </b-col>
            <b-col cols="7" class="section-controls">
              <b-form-select
                size="md"
                cols="3"
                lg="3"
                tab-index="0"
                v-model="saleTypeId"
                :options="getFilteredSaleTypesOptions"
                @change="changeCartItemsSaleType"
                :disabled="getCartTotal < 1"
              />
            </b-col>
          </b-form-row>
        </b-col>
      </b-row>
      <b-row>
        <b-col v-if="getCartSaleType.title">
          <b-alert :show="getCartTotal > 0 && getIsPartialCart" dismissible variant="warning">
            {{ $t('3rdParty.Common.CartItemsRemoved', { type: getCartSaleType.title }) }}
          </b-alert>
        </b-col>
      </b-row>
      <order-page-template
        v-bind="orderProps()"
        :has-cv-transfer="false"
        v-model="orderData"
        :show-summary="false"
        :show-remove-cart-item="true"
      >
      </order-page-template>
    </div>
  </div>
</template>
<script>
import OrderPageTemplate from '@/app/_global/components/templates/OrderPageTemplate'
import currencyMixin from '@/app/_global/mixins/currencyMixin'
import orderCommonsMixin from '@/app/_global/mixins/orderCommonsMixin'
import { mapMasterData } from '@/app/_global/mixins'
import { IS_LOGGED_IN_GETTER_NAME } from '@/config/defaults'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'CartViewPage',
  components: { OrderPageTemplate },
  mixins: [currencyMixin, orderCommonsMixin],
  props: {
    navigateNext: {
      type: Function,
      default: () => () => {},
    },
  },
  data() {
    return {
      orderData: {},
      saleTypeId: false,
    }
  },
  watch: {
    getCartTotal: {
      handler() {
        this.updateSaleTypeIndicator()
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    ...mapGetters('eshop', ['getCartSaleType', 'getCartTotal', 'getIsPartialCart']),
    ...mapGetters({
      isLoggedIn: [IS_LOGGED_IN_GETTER_NAME],
    }),
    ...mapGetters(['getMasterDataOptionsByKey']),
    ...mapMasterData({
      SALE_TYPES: {
        baUpgradeSalesTypeId: 'BA_UPGRADE',
        autoMaintenanceSalesTypeId: 'AUTO_MAINTENANCE',
        repurchaseSalesTypeId: 'RE_PURCHASE',
      },
    }),
    getFilteredSaleTypesOptions() {
      return this.getMasterDataOptionsByKey(this.$const.masterKey.SALE_TYPES).filter(
        x =>
          x.value === this.baUpgradeSalesTypeId ||
          x.value === this.autoMaintenanceSalesTypeId ||
          x.value === this.repurchaseSalesTypeId
      )
    },
  },
  async mounted() {
    await this.loadCart()
    await this.resolveMasters
  },
  methods: {
    ...mapActions('eshop', ['loadCart', 'addProductToCart']),
    updateSaleTypeIndicator() {
      if (this.getCartSaleType) {
        this.saleTypeId = this.$helpers.getValue(this.getCartSaleType, 'id')
      } else {
        this.saleTypeId = false
      }
      if (!this.saleTypeId) {
        this.saleTypeId = this.repurchaseSalesTypeId
      }
    },
    changeCartItemsSaleType() {
      // Todo update this logic
      this.mappedCartItems.forEach(item => {
        this.addProductToCart({
          // Removes the product from cart
          product_id: item.product_id,
          kitting_id: item.kitting_id,
          quantity: item.quantity,
          salesTypeId: this.saleTypeId,
          isUpdateSaleType: true,
        })
      })
    },
  },
}
</script>
