<template>
  <div class="content">
    <div class="enrol-size-selection-wrapper">
      <enrol-grid-1>
        <template slot="full-content">
          <div class="card w-100">
            <div class="font-weight-bold pl-4 pt-3">
              <h4 class="text-primary">{{ title }}</h4>
              <span class="help text-danger animated flash" v-show="getErrors('cartError')">
                {{ getErrors('cartError') }}
              </span>
            </div>
            <div class="card-body">
              <size-selection ref="sizeSelection" />
              <inst-address-selection ref="instAddressSelection" />
              <enrolment-stepped-footer-navigation
                :enrolment-data="enrolmentData"
                :validate-and-save="validate"
                :next-action="nextAction"
                :prev-action="prevAction"
                :previous="previous"
                :next="next"
              />
            </div>
          </div>
        </template>
      </enrol-grid-1>
    </div>
  </div>
</template>
<script>
import enrolGrid1 from '@/app/enrolment/_global/components/templates/layouts/enrol-grid-1'
import SizeSelection from '@/app/_global/components/blocks/SizeSelection'
import InstAddressSelection from '@/app/_global/components/blocks/InstAddressSelection'
import EnrolmentSteppedFooterNavigation from '@/app/enrolment/_global/components/elements/enrolmentSteppedfooterNavigation'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'EnrolmentSizesSelectionPage',
  components: { SizeSelection, EnrolmentSteppedFooterNavigation, enrolGrid1, InstAddressSelection },
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    enrolmentData: { type: Object, required: true },
    previous: { type: String },
    next: { type: String },
    prevAction: { type: Function },
    nextAction: { type: Function },
  },
  data() {
    return {}
  },
  async mounted() {
    await this.loadMasterDataKeysEnrolment({
      country_id: this.enrolmentData.region.value,
      keys: ['sale_types', 'product_additional_requirements'],
    }).then(async () => {})
  },
  methods: {
    ...mapActions(['loadMasterDataKeysEnrolment']),
    async validate() {
      this.enrolmentData.step_states['select-sizes'] = null
      if (this.getCartSizeSelectionRequired === true) {
        if ((await this.$refs.sizeSelection.validate()) === true) {
          this.enrolmentData.step_states['select-sizes'] = true

          return true
        } else {
          this.enrolmentData.step_states['select-sizes'] = false

          return false
        }
      } else {
        if ((await this.$refs.instAddressSelection.validate()) === true) {
          this.enrolmentData.step_states['select-sizes'] = true
          return true
        } else {
          this.enrolmentData.step_states['select-sizes'] = false
          return false
        }
      }
    },
  },
  computed: {
    ...mapGetters(['getErrors']),
    ...mapGetters('eshop', {
      getCartSizeSelectionRequired: 'getCartSizeSelectionRequired',
      getCartNeedSizeSelection: 'getCartNeedSizeSelection',
      getCartNeedAddressSelection: 'getCartNeedAddressSelection',
    }),
    title() {
      return (
        (this.getCartNeedSizeSelection && this.$t('Eshop.Checkout.SelectSizesEVoucher.Title')) ||
        (this.getCartNeedAddressSelection && this.$t('Eshop.Checkout.SelectInstOnly.Title')) ||
        ''
      )
    },
  },
}
</script>
