<template>
  <div class="container">
    <order-page-template v-bind="orderProps()" :continue-action="validateAndContinue">
      <div slot="items" class="bg-white">
        <h4 class="mb-0 py-3 px-4 border border-bottom-0">
          {{ getPageTitle() }}
        </h4>
        <size-selection :e-voucher-enabled="false" ref="sizeSelection" />
      </div>
    </order-page-template>
  </div>
</template>
<script>
import SizeSelection from '@/app/_global/components/blocks/SizeSelection'
import OrderPageTemplate from '@/app/_global/components/templates/OrderPageTemplate'
import orderCommonsMixin from '../mixins/orderCommonsMixin'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'EshopSelectSizes',
  inject: ['$validator'],
  mixins: [orderCommonsMixin],
  components: { SizeSelection, OrderPageTemplate },
  mounted() {
    this.loadCartSizesDetails()
  },
  methods: {
    ...mapActions('eshop', ['loadCartSizesDetails']),
    validateAndContinue() {
      if (this.$refs.sizeSelection.validate()) {
        this.next()
      }
    },
    getPageTitle() {
      if (this.getCartNeedSizeSelection && this.getCartNeedAddressSelection) {
        return this.$t('Eshop.Checkout.SelectSizes.Title')
      } else {
        if (this.getCartNeedSizeSelection) {
          return this.$t('Eshop.Checkout.SelectSizesEVoucher.Title')
        } else {
          return this.$t('Eshop.Checkout.SelectSizesInst.Title')
        }
      }
    },
  },
  computed: {
    ...mapGetters('eshop', ['getCartNeedSizeSelection', 'getCartNeedAddressSelection']),
  },
}
</script>
