<template>
  <div>
    <size-selection ref="sizeSelection" />
    <inst-address-selection ref="instAddressSelection" />
  </div>
</template>
<script>
import SizeSelection from '@/app/_global/components/blocks/SizeSelection'
import InstAddressSelection from '@/app/_global/components/blocks/InstAddressSelection'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'EshopSelectSizes',
  components: { SizeSelection, InstAddressSelection },
  $_veeValidate: {
    validator: 'new',
  },
  methods: {
    ...mapActions('eshop', ['isInstallationDetailsValid']),
    ...mapActions(['logError']),
    async preCheckout(next) {
      let self = this
      let resultArr = []

      if (self.getCartNeedAddressSelection) {
        await self.$refs.instAddressSelection.validate().then(result => {
          resultArr.push(result)
        })
      }

      if (self.getCartNeedSizeSelection) {
        await self.$refs.sizeSelection.validate().then(result => {
          resultArr.push(result)
        })
      }

      if (resultArr.indexOf(false) === -1) {
        next()
      } else {
        return false
      }
    },
  },

  computed: {
    ...mapGetters('eshop', ['getCartNeedSizeSelection', 'getCartNeedAddressSelection', 'getCartHasRental']),
    title() {
      let title = ''
      if (this.getCartNeedSizeSelection && this.getCartNeedAddressSelection) {
        title = this.$t('Eshop.Checkout.SelectSizesInst.Title')
      } else if (this.getCartNeedSizeSelection) {
        title = this.$t('Eshop.Checkout.SelectSizesEVoucher.Title')
      } else if (this.getCartNeedAddressSelection) {
        title = this.$t('Eshop.Checkout.SelectInstOnly.Title')
      }
      return title
    },
  },
}
</script>
