<template>
  <div class="page signup-page sizes installations">
    <div :class="{ container: isContainer }" v-if="getCartNeedSizeSelection || getCartNeedSizeSelection">
      <slot name="title"></slot>
      <size-selection
        :key="`size-selection-${getCartTotal}`"
        ref="sizeSelection"
        :is-evoucher-option-available="false"
      />
      <inst-address-selection :key="`inst-address-selection-${getCartTotal}`" ref="instAddressSelection" />
    </div>
  </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: 'SizesSelectionPage',
  components: { SizeSelection, InstAddressSelection },
  mixins: [],
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    isContainer: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    getCartTotal() {
      this.resetError('cartError')
    },
  },
  computed: {
    ...mapGetters('eshop', [
      'getCartNeedSizeSelection',
      'getCartNeedAddressSelection',
      'getCartHasRental',
      'getCartTotal',
    ]),
    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
    },
  },
  methods: {
    ...mapActions(['logError', 'resetError']),
    ...mapActions('eshop', ['isInstallationDetailsValid']),
    validateAndSubmit: async function() {
      let self = this
      if (self.getCartHasRental) {
        self.logError({ cartError: '' })
        if (self.getCartNeedAddressSelection) {
          self.isInstallationDetailsValid().then(valid => {
            if (valid) {
              return true
            } else {
              self.logError({ cartError: self.$t('Eshop.InstSelection.Invalid') })
              return false
            }
          })
        }
      } else if (this.$refs.sizeSelection.validate()) {
        return true
      }
    },
  },
}
</script>
