<template>
  <div
    :class="{
      'active': isActive,
      'passed': isPassed,
      'visited': isVisited
    }"
    class="summary-step"
    @click="onClickSepSummary"
  >
    <VcSummaryProgress
      :icon="step.icon"
      :visible="isProgressLine"
      :line-filled="isPassed"
      :active-dot="isVisited"
      :is-active="isActive"
    />
    <div class="summary-step-content">
      <div class="flex justify-center lg:justify-between">
        <span class="summary-step-content-header leading-none">
          <h2
            :class="{'text-primary': isActive}"
            class="mb-0 text-sm lg:text-base font-bold uppercase"
          >
            {{ `${stepIndex + 1}. ${step.label}` }}
          </h2>
        </span>
        <i
          v-show="canEdit"
          class="vc-icon-edit-pencil icon-base text-active-elements"
        />
      </div>
      <transition name="fade-content">
        <div
          v-show="isVisited"
          class="summary-step-content-list"
        >
          <div
            v-for="(row, i) in content"
            :key="`r-${i}`"
            class="mb-1 flex"
          >
            <div
              class="font-medium text-sm lg:text-base"
            >
              {{ row.label }}:&nbsp;
            </div>
            <div
              class="text-value font-normal text-sm lg:text-base break-all"
              v-html="row.value"
            />
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'VcSummaryStep',
  components: { VcSummaryProgress },
  props: {
    stepIndex: {
      type: Number,
      default: -1
    },
    step: {
      type: Object as PropType<VcWizardStepType>,
      default: () => ({})
    },
    stepsCount: {
      type: Number,
      default: 0
    },
    visited: {
      type: Number,
      default: 0
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    content: {
      type: Array,
      default: () => []
    }
  },
  emits: ['click-step'],
  computed: {
    canEdit (): boolean {
      return this.stepIndex <= this.visited && this.stepIndex !== this.activeIndex
    },
    isVisited (): boolean {
      return this.stepIndex <= this.visited
    },
    isPassed (): boolean {
      return this.stepIndex < this.visited
    },
    isActive (): boolean {
      return this.stepIndex === this.activeIndex
    },
    isProgressLine (): boolean {
      return this.stepIndex < this.stepsCount - 1
    }
  },
  methods: {
    onClickSepSummary (): void {
      if (this.canEdit) {
        this.$emit('click-step', this.stepIndex)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.summary-step {
  @apply
  w-full
  justify-center
  flex-col
  items-center
  lg:w-auto
  lg:flex-row
  lg:justify-start
  lg:items-start
  flex;
  min-height: 80px;
  &.active, &.passed, &.visited {
    @apply cursor-pointer;
  }
  &-content {
    @apply w-full hidden lg:block flex-grow whitespace-normal pl-4 mb-10;
  }
  &-content-list {
    @apply hidden lg:block mt-4;
    transform-origin: left top;
  }
  &-content-header {
    @apply justify-center lg:justify-start;
  }
}

[dir='rtl'] {
  .summary-step {
    &-content {
      @apply pl-0 pr-4;
    }
  }
}

.fade-content-enter-active,
.fade-content-leave-active {
  transition: all 0.3s linear;
  overflow: hidden;
}
.fade-content-enter-from,
.fade-content-leave-to {
  opacity: 0;
  max-height: 0;
}
.fade-content-enter-to,
.fade-content-leave-from {
  opacity: 1;
  max-height: 100%;
}
</style>
