<template>
  <div>
    <div class="bg-secondary p-2 lifted sticky-top">
      <b-container fluid="lg" class="text-white px-0 py-2">
        <div class="d-flex align-items-center">
          <b-button :to="{ name: 'SvTransfer' }" variant="link" data-qa="svTransfer-backToSvTransferList-btn">
            <icon name="back-arrow" class="icon-size-3 text-white" />
          </b-button>
          <b-img class="ml-2 mr-3 d-none d-md-block icon-size-4" :src="companyLogo" />
          <span class="font-size-5 font-md-size-3">{{ $t('SvTransfer.Creation.Title') }}</span>
        </div>
      </b-container>
    </div>

    <div>
      <b-card class="container mt-4">
        <router-view ref="routeView" />
        <footer-navigator
          :is-busy="isBusy"
          @navigate-next="validateAndContinue"
          @navigate-previous="previous"
          :current-route="currentRoute()"
        />
      </b-card>
    </div>
  </div>
</template>

<script>
import svTransferRouteMixin from '@/app/sv-transfer/mixins/svTransferRouteMixin'
import FooterNavigator from '@/app/sv-transfer/wizard/components/blocks/FooterNavigator'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SvTransferProcessTemplate',
  components: { FooterNavigator },
  mixins: [svTransferRouteMixin],
  data() {
    return {
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    isBusy() {
      return this.isLoading(['memberListLoading', 'creatingSvTransferRecord'])
    },
    getPageTitle() {
      return this.$t(this.$store.state.route.meta.title)
    },
  },
  created() {
    this.clearLoadedData(['svTransfer'])
  },
  async mounted() {
    await this.initRouting(true)
  },
  methods: {
    ...mapActions(['clearLoadedData']),
    validateAndContinue(skipRouting = false) {
      // Map validation on component level
      let componentValidationFunction = this.$refs.routeView.validateAndSubmit

      // If cant find the validation method, set default function
      if (typeof componentValidationFunction !== 'function') {
        componentValidationFunction = () => true
      }
      Promise.resolve(componentValidationFunction()).then(valid => {
        if (valid) {
          // Map validation on route mixin level
          let routeValidationFunction = this.currentRoute().validate
          // If cant find the validation method, set default function
          if (typeof routeValidationFunction !== 'function') {
            routeValidationFunction = () => valid
          }
          // If pass move to next route
          return Promise.resolve(routeValidationFunction()).then(valid => {
            if (valid && !skipRouting) {
              this.next()
            }
          })
        }
      })
    },
  },
}
</script>
