<template>
  <div
    id="MFullStepper"
    class="d-flex flex-column justify-content-between h-100">
    <m-full-stepper-header
      :main-title="mainTitle"
      v-on="$listeners['on-save'] ? { 'on-save': ()=>$emit('on-save') } : null"
      @on-exit="$emit('on-exit')" />
    <m-full-stepper-body
      :steps="steps"
      :current-index="currentIndex">
      <template
        v-for="(step, index) in steps"
        :slot="'step-'+(index+1)">
        <slot :name="'step-'+(index+1)" />
      </template>
    </m-full-stepper-body>
    <m-full-stepper-footer
      :steps="steps"
      :current-index="currentIndex"
      :show-custom-submit-mobile="showCustomSubmitMobile"
      @go-to-previous-step="$listeners['on-previous'] ? $emit('on-previous') : previousStep()"
      @go-to-next-step="$listeners['on-next'] ? $emit('on-next') : nextStep()"
      @on-submit="$emit('on-submit')"
      @on-exit="$emit('on-exit')">
      <template
        v-if="$slots['custom-submit']"
        slot="submit">
        <slot name="custom-submit" />
      </template>
    </m-full-stepper-footer>
  </div>
</template>

<script>
import MFullStepperHeader from './components/MFullStepperHeader.vue';
import MFullStepperBody from './components/MFullStepperBody.vue';
import MFullStepperFooter from './components/MFullStepperFooter.vue';

/**
 * A step wizard with header, body and footer containers. The step titles and content are set by slots and props.
 */
export default {
  name: 'MFullStepper',
  components: {
    MFullStepperHeader,
    MFullStepperBody,
    MFullStepperFooter,
  },
  props: {
    mainTitle: {
      type: String,
      required: true,
    },
    steps: {
      type: Array,
      required: true,
    },
    showCustomSubmitMobile: {
      type: Boolean,
      required: false,
      default: undefined,
    },
    stepIndex: {
      type: Number,
      required: false,
      default: 0,
    },
    lightColor: {
      type: String,
      default: '#ebedef',
    },
    darkColor: {
      type: String,
      default: '#34495e',
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  watch: {
    stepIndex(newValue) {
      this.currentIndex = newValue;
    },
  },
  methods: {
    previousStep() {
      if (this.currentIndex > 0) this.currentIndex -= 1;
    },
    nextStep() {
      if (this.currentIndex < this.steps.length - 1) this.currentIndex += 1;
    },
  },
};
</script>
