<template>
  <layout :logo-center="logoCenteredSteps.includes(step)">
    <div class="container d-flex justify-content-center flex-row h-100 px-sm-d-0">
      <div v-if="step === 'failed' || getErrors('Unauthenticated') === true">
        <h3>{{ $t('Virel.Invalid') }}</h3>
      </div>
      <div v-else-if="step === 'empty'">
        <h3>{{ $t('Common.Cart.EmptyCart') }}</h3>
      </div>
      <icon v-else-if="step === 'start'" name="spinner" class="icon-size-4" pulse />
      <component v-else :is="step" class="px-0 px-md-2" v-bind="commons" />
    </div>
  </layout>
</template>
<script>
import layout from './templates/Layout'
import review from './steps/Review'
import selectSizes from './steps/SelectSizes'
import payment from './steps/Payment'
import complete from './steps/Complete'
import { setDefaultToken } from '@/store/utils/api'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'OrderReview',
  mixins: [],
  components: { layout, review, selectSizes, payment, complete },
  beforeRouteEnter(to, from, next) {
    if (to.query.token !== undefined) {
      setDefaultToken(to.query.token)
    }
    next()
  },
  data() {
    return {
      step: 'start',
      steps: ['select-sizes', 'review', 'payment', 'complete'],
      commons: {
        countryId: null,
        locationId: null,
        next: this.next,
      },
      logoCenteredSteps: ['faild', 'start', 'empty'],
    }
  },
  mounted() {
    let self = this
    // validate
    let query = self.$route.query
    let clearDataAction = query.redirect === 'true' ? Promise.resolve() : self.clearShoppingData()
    if (
      typeof query.token !== 'undefined' &&
      typeof query.country !== 'undefined' &&
      typeof query.location !== 'undefined'
    ) {
      self.commons.countryId = parseInt(query.country)
      self.commons.locationId = parseInt(query.location)
      clearDataAction.then(() => {
        self.virelCountryAndLocation({
          countryId: self.commons.countryId,
          locationId: self.commons.locationId,
        })
        self.loadCountries().then(() => {
          self
            .loadCart({
              countryId: self.commons.countryId,
              locationId: self.commons.locationId,
            })
            .then(async () => {
              if (self.getCartTotal > 0) {
                self.step =
                  (query.redirect === 'true' && 'complete') ||
                  ((await this.cartNeedSelection()) && 'select-sizes') ||
                  'review'
              } else {
                self.step = 'empty'
              }
            })
        })
      })
    } else {
      self.step = 'failed'
    }
  },
  methods: {
    ...mapActions('eshop', ['loadCart', 'cartNeedSelection']),
    ...mapActions(['virelCountryAndLocation', 'clearShoppingData', 'loadCountries']),
    next() {
      let currentIndex = this.steps.findIndex(step => this.step === step)
      if (currentIndex !== -1) {
        this.step = this.steps[currentIndex + 1]
      }
    },
  },
  computed: {
    ...mapGetters(['getErrors']),
    ...mapGetters('eshop', ['getCartTotal']),
  },
}
</script>
