<template>
  <div>
    <b-container fluid class="vh-min-100 d-flex flex-column p-0">
      <b-row
        v-if="showStepper"
        class="justify-content-center
                    w-100
                    row
                    justify-content-center
                    bg-white
                    m-0
                    remove-gutter-2
                    order-steps
                    py-3"
      >
        <b-container>
          <stepped
            :steps="steps"
            :class="stepperClass"
            :active-index="selectedCheckout"
            :steps-callback="stepsCallback"
          />
        </b-container>
      </b-row>
      <div class="pt-3" :class="contentWrapperClass">
        <slot>
          <router-view />
        </slot>
      </div>
    </b-container>
  </div>
</template>
<script>
import Stepped from '../elements/SteppedIcon'
import OrderDefaultIcons from '../../fixtures/eshop-order-default-icons'

export default {
  name: 'CompleteOrderTemplate',
  props: {
    steps: {
      type: Array,
      default() {
        return OrderDefaultIcons
      },
    },
    stepperClass: {
      type: [Array, Object],
      default: () => [],
    },
    contentWrapperClass: {
      type: [Array, Object],
      default: () => ['flex-grow-1', 'd-flex'],
    },
    stepsCallback: {
      type: Function,
      default: () => () => {},
    },
    showStepper: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    Stepped,
  },
  computed: {
    selectedCheckout() {
      return this.steps.findIndex(steps => {
        return steps.path === this.$route.path
      })
    },
  },
}
</script>
