<template>
  <div class="container">
    <order-page-template
      v-bind="orderProps()"
      show-redeem-summary
      :continue-action="validateAndContinue"
      :show-continue-button="false"
      :show-promo-code="false"
    >
      <div v-if="getITokenCartItems.length">
        <div>{{ $t('Itoken.Redemption.Title') }}</div>
        <i-token-selected-products-table class="bg-white" :currency="currency" :selected-items="getITokenCartItems" />
      </div>

      <order-payment-block
        :on-payment="onPayment"
        :create-sales="createSale"
        :balance="getCartTotalPrice"
        :on-hold-payment-options-key="getOnHoldPaymentKey()"
      />
    </order-page-template>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import OrderPageTemplate from '@/app/_global/components/templates/OrderPageTemplate'
import OrderPaymentBlock from '@/app/_global/components/blocks/OrderPayment'
import currencyMixin from '@/app/_global/mixins/currencyMixin'
import orderCommonsMixin from '@/app/_global/mixins/orderCommonsMixin'
import ITokenSelectedProductsTable from '@/app/i-token/_global/components/elements/ITokenSelectedProductsTable'

export default {
  name: 'OrderPayment',
  mixins: [currencyMixin, orderCommonsMixin],
  components: {
    ITokenSelectedProductsTable,
    OrderPageTemplate,
    OrderPaymentBlock,
  },
  data() {
    return {
      shippingInfo: {},
      sale_id: null,
    }
  },
  mounted() {
    this.sale_id = null
    this.clearLoadedData('sales')
  },
  methods: {
    ...mapActions(['clearLoadedData', 'doSalesCartCreateSale']),
    ...mapActions('eshop', ['setPaymentStepStatus']),
    createSale(paymentMode) {
      this.setPaymentStepStatus({ validated: true })
      // TODO: use when sales can allow multiple payment to single sales
      // if (!this.sale_id) {
      return this.doSalesCartCreateSale({
        selected: {
          shipping: this.getOrderShipping,
          promotions: this.getSelectedFocPwpItems,
          campaign_selection: this.getITokenCartItems.map(item => ({
            id: item.id,
            type: item.type,
            quantity: item.quantity,
          })),
        },
        redeem_later: this.getRedeemLaterStatus,
        promotion: this.getEligiblePromotion,
      }).then(saleId => {
        if (Number.isInteger(saleId)) {
          paymentMode.sale_id = saleId
          this.sale_id = saleId
          return paymentMode
        } else {
          return false
        }
      })
      // } else {
      //   paymentMode.sale_id = this.sale_id
      //   return Promise.resolve(paymentMode)
      // }
    },
    onPayment() {
      this.next()
    },
    validateAndContinue() {
      // TODO: Validate
    },
  },
  computed: {
    ...mapGetters('eshop', [
      'getOrderShipping',
      'getCartTotalPrice',
      'getEligiblePromotion',
      'getSelectedFocPwpItems',
      'getCartHasRental',
      'getRedeemLaterStatus',
    ]),
    ...mapGetters(['getCountryNameById', 'getAppLocationCountry']),
    countryName() {
      let countryName = this.getCountryNameById(this.getAppLocationCountry.countryId)

      if (countryName !== undefined && countryName !== null) {
        countryName = countryName.toLowerCase()
      } else {
        countryName = ''
      }

      return countryName
    },
  },
}
</script>
