<template>
  <div class="container">
    <order-page-template
      v-bind="orderProps()"
      :continue-action="validateAndContinue"
      :show-continue-button="false"
      :show-items-mobile="false"
      :show-promo-code="false"
    >
      <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 '../mixins/orderCommonsMixin'

export default {
  name: 'OrderPayment',
  mixins: [currencyMixin, orderCommonsMixin],
  components: {
    OrderPageTemplate,
    OrderPaymentBlock,
  },
  data() {
    return {
      shippingInfo: {},
      sale_id: null,
    }
  },
  mounted() {
    this.sale_id = null
    this.clearLoadedData('sales')
  },
  methods: {
    ...mapActions(['clearLoadedData', 'doSalesCartCreateSale']),
    createSale(paymentMode) {
      // TODO: use when sales can allow mutiple payment to single sales
      // if (!this.sale_id) {
      return this.doSalesCartCreateSale({
        selected: {
          shipping: this.getOrderShipping,
          promotions: this.getSelectedFocPwpItems,
        },
        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']),
  },
}
</script>
