<template>
  <div>
    <b-container fluid class="vh-min-100 d-flex flex-column p-0">
      <b-row
        class="justify-content-center
                    w-100
                    row
                    justify-content-center
                    bg-white
                    m-0
                    remove-gutter-2
                    order-steps
                    py-3"
      >
        <b-container>
          <div class="divStepper" v-if="steps.length > 1">
            <stepped
              class="stepper mt-5 pt-3"
              :steps="steps"
              text-placement="bottom"
              :active-step="currentRouteIndex"
              :steps-callback="stepsCallback"
            >
              <template slot="textArea" slot-scope="textAreaProps">
                <div class="step-title">{{ textAreaProps.text.title }}</div>
                <div class="step-circle"></div>
                <div class="step-bar-left"></div>
                <div class="step-bar-right"></div>
              </template>
            </stepped>
          </div>
        </b-container>
      </b-row>
      <div :class="currentContainerClassCustom">
        <div :class="currentContainerChildClassCustom">
          <slot>
            <transition name="fade">
              <router-view />
            </transition>
          </slot>
        </div>
      </div>
    </b-container>
  </div>
</template>
<script>
import Stepped from '@/app/_global/components/elements/Stepped'
import SlotPropsSetter from '@/elements/common/mixins/slot-props-setter'
import { mapActions } from 'vuex'

export default {
  name: 'CheckoutStepsTemplate',
  components: {
    Stepped,
  },
  mixins: [SlotPropsSetter],
  props: {
    steps: {
      type: Array,
    },
    contentWrapperClass: {
      type: Object,
      default: () => {},
    },
    containerClassCustom: {
      type: Object,
      default: () => {},
    },
    containerChildClassCustom: {
      type: Object,
      default: () => {},
    },
    stepsCallback: {
      type: Function,
      default: () => () => {},
    },
    currentRouteIndex: {
      type: [Number],
    },
    routeIsLoading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    currentRouteIndex: {
      handler() {
        this.setSlotProp('containerClassCustom', 'currentContainerClassCustom')
        this.setSlotProp('containerChildClassCustom', 'currentContainerChildClassCustom')
        this.resetError('cartError')
      },
      immediate: true,
    },
  },
  data() {
    return {
      currentContainerClassCustom: false,
      currentContainerChildClassCustom: false,
    }
  },
  methods: {
    ...mapActions(['resetError']),
  },
}
</script>
