<template>
  <div class="page signup-page summary">
    <div class="container">
      <order-page-template
        v-bind="orderProps()"
        v-model="orderData"
        :show-continue-button="false"
        :show-promo-code="false"
      >
        <order-payment-block
          v-if="pageReady"
          :cross-domain="true"
          class="order-payment"
          :on-payment="navigateNext"
          :create-sales="createSale"
          :balance="getCartTotalPrice"
          :lottie-loader-file="Loader"
          lottie-loader-class="loader loading"
          :on-hold-payment-options-key="getOnHoldPaymentKey()"
          :show-on-hold-payment-options="hasOnHoldPaymentPrivilege"
        />
      </order-page-template>
    </div>
  </div>
</template>
<script>
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 Loader from '@@/app/_global/components/elements/lottie/loader.json'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SummaryPage',
  components: { OrderPageTemplate, OrderPaymentBlock },
  mixins: [currencyMixin, orderCommonsMixin],
  props: {
    navigateNext: {
      type: Function,
      default: () => () => {},
    },
  },
  data() {
    return {
      Loader,
      orderData: {},
      shippingInfo: {},
      sale_id: null,
      pageReady: false,
    }
  },
  computed: {
    ...mapGetters('eshop', [
      'getOrderShipping',
      'getCartTotalPrice',
      'getEligiblePromotion',
      'getSelectedFocPwpItems',
      'getCartHasRental',
    ]),
    ...mapGetters(['getCountryNameById', 'getAppLocationCountry']),
    ...mapGetters('3rdPartyCheckoutEnrolment', ['getSkipEnrolmentStatus']),
    ...mapGetters('3rdPartyCheckoutShippingAndPayment', ['getShippingAndPaymentInfo']),
    countryName() {
      let countryName = this.getCountryNameById(this.getAppLocationCountry.countryId)

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

      return countryName
    },
    hasOnHoldPaymentPrivilege() {
      let privilege = true
      if (this.getSkipEnrolmentStatus === true) {
        privilege = false
      }
      return privilege
    },
  },
  async mounted() {
    // Need to call loadCart api seems component being rendered before checkoutRoutingMixin
    // This will fix payment total amount if has delivery and other fees
    await this.loadCart()
    this.sale_id = null
    this.clearLoadedData('sales')
    this.pageReady = true
  },
  methods: {
    ...mapActions(['clearLoadedData', 'doSalesCartCreateSale']),
    ...mapActions('eshop', ['loadCart']),
    async createSale(paymentMode) {
      return await this.doSalesCartCreateSale({
        selected: {
          shipping: this.getShippingAndPaymentInfo.shippingModel,
          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
        }
      })
    },
  },
}
</script>
