<template>
  <q-stepper
    v-bind="$props"
    ref="stepper__"
    class="w-stepper"
    :flat="flat"
    :class="{ 'hide-header-navigation': hideHeaderNavigation, 'stepper-small-screen': $q.screen.lt.md }"
    :vertical="isVertical"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <template #default>
      <slot />
    </template>
    <template v-if="!isVertical" #message>
      <q-linear-progress v-if="hideHeaderNavigation" class="progress" :animation-speed="progressAnimationSpeed__" :value="progress__" />
      <slot name="message" />
    </template>
    <template #navigation>
      <slot name="navigation" />
    </template>
  </q-stepper>
</template>

<script>
import { QStepper } from "quasar";

export default {
  name: "WStepper",
  mixins: [QStepper],
  inheritAttrs: true,
  props: {
    flat: {
      type: Boolean,
      default: true,
    },
    hideHeaderNavigation: {
      type: Boolean,
      default: true,
    },
    alwaysHorizontal: {
      type: Boolean,
      default: false,
    },
    vertical: {
      type: Boolean,
      default: false,
    }
  },
  emits: ["update:modelValue"],
  data() {
    return {
      mounted__: false
    };
  },
  computed: {
    isVertical() {
      return this.vertical || !(this.alwaysHorizontal || this.$q.screen.gt.md);
    },
    progress__() {
      return (this.modelValue - 1) / this.panelsCount;
    },
    progressAnimationSpeed__() {
      return this.animated ? 500 : 0;
    },
    panelsCount() {
      if (!this.mounted__) { return 1; }

      // TODO: Find a better way
      return this.$refs.stepper__.$el.querySelectorAll(".q-stepper__tab").length;
    },
  },
  mounted() {
    this.mounted__ = true;
  },
  methods: {
    next() {
      this.$refs.stepper__.next();
    },
    previous() {
      this.$refs.stepper__.previous();
    },
  },
};
</script>
