<template>
  <div
    :class="{'active': isActive}"
    class="summary-step-progress"
  >
    <div
      v-show="visible"
      :class="lineFilledClass"
      class="summary-step-progress-line relative"
    >
      <div class="summary-step-dividers">
        <span
          v-for="item in countDownIcons"
          :key="`down-${item}`"
          class="divide-icon"
        >
          <i class="vc-icon-down icon-base text-white" />
        </span>
      </div>
      <i class="summary-step-progress-line-inner h-0 h-full" />
    </div>
    <div class="summary-step-progress-circle">
      <div
        :class="dotFilledClass"
        class="summary-step-progress-circle-point"
      />
      <div class="summary-step-progress-circle-icon">
        <i
          :class="[icon, activeDot ? 'text-active-elements' : 'text-inactive-elements']"
          class="step-icon min-w-8"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

const DEFAULT_ICON = 'vc-icon-settings'

export default defineComponent({
  name: 'VcSummaryProgress',
  props: {
    icon: {
      type: String,
      default: DEFAULT_ICON
    },
    lineFilled: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    isActive: {
      type: Boolean,
      default: false
    },
    activeDot: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    countDownIcons: 3
  }),
  computed: {
    lineFilledClass (): string {
      return this.lineFilled ? 'bg-progress-line-done' : 'bg-progress-line-not-done'
    },
    dotFilledClass (): string {
      return this.activeDot ? 'border-progress-line-done' : 'border-progress-line-not-done'
    }
  }
})
</script>

<style lang="scss" scoped>
.summary-step-progress {
  @apply
  relative
  h-4
  lg:h-full
  w-full
  lg:w-4
  flex-shrink-0
  border-progress-line-not-done;

  .summary-step-progress-line {
    width: 6px;
    top: 14px;
    bottom: 0;
    left: 4px;
    border-color: inherit;
    position: absolute;
  }

  .summary-step-progress-circle {
    @apply absolute rounded-full;
    border-width: 1px;
    width: 30px;
    height: 30px;
    transform: translateY(-8px);
    left: -50%;
    background: transparent;
    border-color: transparent;
    z-index: 1;
    transition: .3s ease-out;

    .summary-step-progress-circle-point {
      @apply absolute bg-white rounded-full h-4 w-4;
      border-width: 4px;
      --bg-opacity: 1;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
    }

    .summary-step-progress-circle-icon {
      position: absolute;
      right: calc(100% + 8px);
      .step-icon {
        font-size: 1.875rem
      }
    }
  }

  .summary-step-dividers {
    @apply flex lg:flex-col justify-around items-center h-full w-full absolute;
  }

  &.active {
    @apply cursor-pointer;
    .summary-step-progress-circle {
      @apply border-active-elements bg-active-elements-bg--focus;
    }
  }
  @media only screen and (max-width: 1264px) {
    .summary-step-progress-line {
      width: 100%;
      height: 6px;
      top: 4px;
      left: calc(50% + 8px);
    }
    .summary-step-progress-circle {
      left: 50%;
      .summary-step-progress-circle-icon {
        top: calc(100% + 2px);
        right: 50%;
        transform: translateX(50%);
        .step-icon {
          font-size: 1.375rem
        }
      }
    }
    .summary-step-dividers {
      .divide-icon {
        transform: rotate(-90deg);
      }
    }
  }
}
[dir='rtl'] {
  .summary-step-progress {
    .summary-step-progress-circle {
      .summary-step-progress-circle-icon {
        left: calc(100% + 8px);
        right: auto;
      }
    }
    @media only screen and (max-width: 1264px) {
      .summary-step-progress-line {
        right: calc(50% - 8px);
        left: auto;
      }
      .summary-step-progress-circle {
        .summary-step-progress-circle-icon {
          left: 50%;
          right: auto;
          transform: translateX(-50%);
        }
      }
      .summary-step-dividers {
        .divide-icon {
          transform: rotate(90deg);
        }
      }
    }
  }
}
</style>
