<template>
  <div :class="{ stepped: true, centered: center, 'centered-full': centerFull, solid: borderSolid }">
    <template v-for="(step, index) in steps">
      <div
        :key="`stepper-steps-${index}`"
        v-if="steps.length === 0 || (steps.length > 1 && (step.show === undefined || step.show))"
        :class="{
          step: true,
          current: activeStep === index,
          active: activeStep === index || step.state,
          valid: step.state,
          old: oldStep === index,
          past: activeStep > index,
          complete: activeStep > index,
          new: newStep > activeStep && newStep === index,
          guide: isGuideMode(step.guide),
          'is-guide': step.guide !== undefined && isGuideMode(step.guide) && guideStatus,
          dense: dense,
          [step.class]: typeof step.class !== 'undefined',
        }"
      >
        <slot v-if="textPlacement === 'top'" name="textArea" :index="index" :text="step" :callback="callback">
          {{ step }}
        </slot>
        <div class="step-separator">
          <div class="step-progress">
            <template v-for="(progress, progressIndex1) in progressList(index)">
              <div
                v-if="center && index !== steps.length - 1"
                :key="`stepper-steps-progress1-${progressIndex1}`"
                :class="['progress-bar', progress['type'], progress['class'] && progress['class']]"
                :style="stepsProgressClass(progress)"
              ></div>
            </template>
            <div
              v-for="(progress, progressIndex2) in progressList(index - 1)"
              :key="`stepper-steps-progress2-${progressIndex2}`"
              :class="[
                'progress-bar',
                progress['type'],
                'progress-bar-previous',
                progress['class'] && progress['class'],
              ]"
              :style="stepsProgressClass(progress)"
            ></div>
          </div>
          <slot name="indicator" :index="index" :step="step">
            <b-link
              v-if="getSelectableMeta(step.selectable) !== undefined"
              :to="getRoutingPath(getSelectableMeta(step.selectable))"
              @click="
                () => {
                  if (callback) {
                    callback(step)
                  }
                }
              "
              :class="indicatorClass(step)"
            >
              <slot name="indicatorValue" :index="index" :text="step" />
            </b-link>
            <span
              v-else
              :class="indicatorClass(step)"
              @click="
                () => {
                  if (callback) {
                    callback(step)
                  }
                }
              "
            >
              <slot name="indicatorValue" :index="index" :text="step" />
            </span>
          </slot>
        </div>
        <div
          class="stepper-selectable-indicator"
          v-if="
            iconIndicator && ((getSelectableMeta(step.selectable) !== undefined && guideStatus) || activeStep === index)
          "
        >
          <icon name="enrol-stepper-arrow-up" />
        </div>
        <slot v-if="textPlacement === 'bottom'" name="textArea" :index="index" :text="step" :callback="callback">
          {{ step }}
        </slot>
      </div>
    </template>
    <template v-for="(step, index) in steps">
      <div
        class="text-left"
        v-if="steps.length === 1"
        :key="`stepper-steps-${index}`"
        :class="{ step: true, active: activeStep === index, dense: dense }"
      >
        <slot v-if="textPlacement === 'top'" name="textArea" :index="index" :text="step" :callback="callback">
          {{ step }}
        </slot>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'Stepped',
  props: {
    steps: {
      type: Array,
      default: () => [],
    },
    activeStep: {
      type: Number,
      default: 0,
    },
    oldStep: {
      type: Number,
      default: -1,
    },
    newStep: {
      type: Number,
      default: -1,
    },
    center: {
      type: Boolean,
      default: false,
    },
    centerFull: {
      type: Boolean,
      default: false,
    },
    textPlacement: {
      type: String,
      default: 'bottom',
    },
    borderSolid: {
      type: Boolean,
      default: false,
    },
    dense: {
      type: Boolean,
      default: false,
    },
    progresses: {
      type: Array,
      default: () => [],
    },
    indicatorIcon: {
      type: Boolean,
      default: false,
    },
    guideStatus: {
      type: Boolean,
      default: false,
    },
    callback: {
      type: Function,
      required: false,
    },
    iconIndicator: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    progressWidth(width) {
      return this.center ? (width > 50 ? 50 : width) : width
    },
    progressWidthForPrevious(width) {
      return this.center ? (width > 50 ? width - 50 : 0) : 0
    },
    progressList(index) {
      return this.progresses.filter(x => x.index === index)
    },
    stepsProgressClass(item) {
      let styleArr = []
      let width = `width: ${this.progressWidthForPrevious(item.value)}%;`
      if (this.$helpers.getValue(item, 'lineColor')) {
        let backgroundColor = `background-color: ${item.lineColor};`
        styleArr.push(backgroundColor)
      }
      styleArr.push(width)

      return styleArr.join(' ')
    },
    isGuideMode(guide) {
      return typeof guide === 'function' ? guide() : guide
    },
    getSelectableMeta(selectable) {
      return typeof selectable === 'function' ? selectable() : selectable
    },
    getRoutingPath(route) {
      route = route || {}
      return { name: route.name, params: route.params }
    },
  },
  computed: {
    indicatorClass: vue => step => {
      return {
        'step-indicator': true,
        selectable: vue.getSelectableMeta(step.selectable) !== undefined,
        'has-value': !!vue.$slots['indicatorValue'] || !!vue.$scopedSlots['indicatorValue'],
      }
    },
  },
}
</script>
