<template>
  <div
    :style="styles"
    :class="`text-${color}`"
    class="vc-spinner vc-spinner--stretch"
  >
    <div class="rect rect-1" />
    <div class="rect rect-2" />
    <div class="rect rect-3" />
    <div class="rect rect-4" />
    <div class="rect rect-5" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { convertToUnit } from '@/utils/helpers'

const DEFAULT_SIZE = 40

export default defineComponent({
  name: 'Stretch',
  props: {
    size: {
      type: [String, Number],
      default: DEFAULT_SIZE
    },
    color: {
      type: String,
      default: 'primary'
    }
  },
  computed: {
    styles () {
      const size = convertToUnit(this.size)
      return {
        width: size,
        height: size
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-spinner {
  @apply inline-flex gap-1 text-center text-xxs;
  * {
    line-height: 0;
    box-sizing: border-box;
  }
}
.rect{
  animation: stretchAnimation 1.2s ease-in-out infinite;
  background-color: currentColor;
}
.vc-spinner > div {
  height: 100%;
  width: 10%;
  display: inline-block;
}
.vc-spinner .rect-2 {
  animation-delay: -1.1s;
}
.vc-spinner .rect-3 {
  animation-delay: -1.0s;
}
.vc-spinner .rect-4 {
  animation-delay: -0.9s;
}
.vc-spinner .rect-5 {
  animation-delay: -0.8s;
}
@keyframes stretchAnimation {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
  }
}
</style>
