import { mapGetters, mapActions } from 'vuex'
import currencyMixin from '@/app/_global/mixins/currencyMixin'

export default {
  mixins: [currencyMixin],
  props: {
    next: {
      type: Function,
    },
  },
  methods: {
    ...mapActions(['clickEsacReviewAndShippingBack', 'clickEsacMakePaymentBack']),
    orderProps: function() {
      return {
        orderItem: this.mappedOrderItem,
        currencySymbol: this.currency,
        summaryCount: this.getSummaryCount,
        summaryAmount: this.summaryAmount,
        grandTotal: this.getGrandTotal,
        continueText: this.$t('Esac.EsacVoucherRedemption.Button.Continue'),
        showNoteForFocPwpItems: false,
        showItemImage: true,
        showItemCv: false,
        showEwallet: true,
        ewalletAmount: 0,
        showPromoCode: false,
        promoCode: '',
        applyPromoCode: null,
        continueDisabled: false,
      }
    },
    stepCallback(step) {
      if (typeof step.callback === 'function') {
        let currentStep = this.getEsacRouterData.currentStep
        if (currentStep !== 'OrderCompleted') {
          step.callback()
        }
      }
    },
  },
  computed: {
    ...mapGetters([
      'getEsacVoucherData',
      'getEsacProductData',
      'getEsacTotalPurchaseQuantity',
      'getEsacSaleCreationData',
      'getEsacRouterData',
    ]),
    mappedOrderItem: function() {
      let orderItems = []
      this.getEsacProductData.forEach(item => {
        if (item.disabled === false && item.selected === true && item.visible === true && item.quantity > 0) {
          orderItems.push(item)
        }
      })
      this.getEsacVoucherData.forEach(item => {
        if (item.visible && item.selected) {
          orderItems.push({
            item_icon: 'esac-voucher',
            item_icon_class: 'esac-voucher-image',
            item_code: item.voucher_number,
            item_name: this.$t('Esac.EsacVoucherRedemption.TableItem.EsacVoucher'),
            quantity: 1,
            cv: 0,
            amount: 0 - parseFloat(item.voucher_value),
          })
        }
      })
      return orderItems
    },
    getSummaryCount: function() {
      return [
        {
          label: this.$t('Esac.EsacVoucherRedemption.Section.OrderSummary.Items'),
          value: this.getEsacTotalPurchaseQuantity,
        },
      ]
    },
    summaryAmount() {
      let orderFees = this.getEsacSaleCreationData.sales_data.order_fees
      return [
        {
          label: this.$t('Common.Sales.TotalNetExcludesGST'),
          value: orderFees.total_nmp,
        },
        {
          label: this.$t('Common.Sales.DeliveryFee'),
          value: orderFees.delivery_fee,
        },
        {
          label: this.$t('Common.Sales.TaxAmount'),
          value: orderFees.tax_amount,
        },
        {
          label: this.$t('Common.Sales.RoundingAdjustmentAmount'),
          value: orderFees.rounding_adjustment,
        },
      ]
    },
    getGrandTotal() {
      return this.$helpers.getCurrencyValue(this.getEsacSaleCreationData.sales_data.order_fees.total_gmp)
    },
    selectedOrder() {
      let currentStep = this.getEsacRouterData.currentStep
      const order = ['SelectProduct', 'ReviewAndShipping', 'MakePayment', 'OrderCompleted']
      let isActive = componentName => {
        let stepIndex = order.findIndex(x => x === componentName)
        let currentIndex = order.findIndex(x => x === currentStep)
        return currentIndex >= stepIndex
      }
      return [
        {
          icon: 'eshop-esac',
          title: this.$t('Esac.EsacVoucherList.Title'),
          state: isActive('SelectProduct'),
          callback: this.clickEsacReviewAndShippingBack,
        },
        {
          icon: 'eshop-shipping',
          title: this.$t('Eshop.Order.Review.Step.Title'),
          state: isActive('ReviewAndShipping'),
          callback: this.clickEsacMakePaymentBack,
        },
        {
          icon: 'eshop-payment',
          title: this.$t('Common.MakePayment'),
          state: isActive('MakePayment'),
        },
        {
          icon: 'eshop-completed',
          title: this.$t('Eshop.Order.Completed.Text'),
          state: isActive('OrderCompleted'),
          componentName: 'OrderCompleted',
        },
      ]
    },
  },
}
