<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"
        :check-epp-payments="false"
        medium="membership_subscription"
        :show-on-hold-payment-options="false"
        :tnc-text="$t('Eshop.Order.GlobalWords.RulesAndRegulations')"
        :on-hold-payment-options-key="['isp_on_hold_payment_options']"
        :balance="parseFloat(getSubscriptionSale.order_fees.total_gmp)"
      />
    </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'
import Routes from '../../router'

export default {
  name: 'OrderPayment',
  mixins: [currencyMixin, orderCommonsMixin],
  components: {
    OrderPageTemplate,
    OrderPaymentBlock,
  },
  data() {
    return {
      shippingInfo: {},
      sale_id: null,
      routes: Routes[0].children,
    }
  },
  mounted() {
    this.sale_id = null
    this.clearLoadedData('sales')
  },
  methods: {
    ...mapActions(['clearLoadedData', 'loadSubscriptionSale']),
    createSale(paymentMode) {
      let self = this
      return this.loadSubscriptionSale({ create_sale: 1 }).then(payload => {
        paymentMode.sale_id = self.getSubscriptionSale.sale_id
        self.sale_id = self.getSubscriptionSale.sale_id
        return paymentMode
      })
    },
    onPayment() {
      this.$router.push(this.routes[this.routes.length - 1].path)
    },
    validateAndContinue() {
      // TODO: Validate
    },
  },
  computed: {
    ...mapGetters(['getSubscriptionSale']),
  },
}
</script>
