<template>
  <div class="vc-wizard-summary">
    <div class="vc-wizard-summary-steps">
      <template
        v-for="(stepItem, index) in steps"
        :key="`summary-${index}`"
      >
        <VcSummaryStep
          :step-index="index"
          :step="stepItem"
          :steps-count="steps.length"
          :visited="visited"
          :active-index="activeIndex"
          :content="content[stepItem.step] || []"
          @click-step="onClickSummaryStep"
        />
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import VcSummaryStep from '@/components/VcWizard/VcSummaryStep.vue'
import { VcWizardStepType, VcWizardSummaryType } from './VcWizard.types'

export default defineComponent({
  name: 'VcWizardSummary',
  components: { VcSummaryStep },
  props: {
    steps: {
      type: Array as PropType<VcWizardStepType[]>,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    visited: {
      type: Number,
      default: 0
    },
    content: {
      type: Object as PropType<VcWizardSummaryType>,
      default: () => ({})
    }
  },
  emits: ['update-step'],
  methods: {
    onClickSummaryStep (data: number): void {
      this.$emit('update-step', data)
    }
  }
})
</script>

<style lang="scss" scoped>
  .vc-wizard-summary {
    @apply bg-default-bg px-3 py-0 lg:px-5 lg:py-8 xl:px-10 xl:py-10;
    width: var(--vc-wizard-summary-width);
    &-steps {
      @apply pb-5 lg:pb-0 lg:pl-12 xl:pl-8 w-full h-full relative flex flex-row lg:flex-col;
    }
  }

[dir='rtl'] {
  .vc-wizard-summary {
    &-steps {
      @apply lg:pl-0 xl:pl-0 lg:pr-12 xl:pr-8;
    }
  }
}
</style>
