<template>
  <div
    :style="styles"
    :class="[`vc-spinner--${color}`, `text-${color}`]"
    class="vc-spinner vc-spinner--circles"
  />
</template>

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

const DEFAULT_SIZE = 40

export default defineComponent({
  name: 'Circles',
  props: {
    size: {
      type: [Number, String],
      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>
$speedMain: 2s;
$speedBefore: 3s;
$speedAfter: 4s;

@mixin colorsAction($color) {
  border-top-color: var(--#{$color}-actions);
  &:before {
    border-top-color: var(--#{$color}-actions--focus);
  }
  &:after {
    border-top-color: var(--#{$color}-actions--pressed);
  }
}

.vc-spinner{
  @apply box-border relative;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: circles-spin $speedMain linear infinite;
  border-top-color: currentColor;

  &:before, &:after{
    content:'';
    box-sizing: border-box;
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
  }
  &:before{
    @apply top-0 left-0 right-0 bottom-0;
    animation: circles-spin $speedBefore linear infinite;
    border-top-color: currentColor;
  }
  &:after{
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    animation: circles-spin $speedAfter linear infinite;
    border-top-color: currentColor;
  }

  &--primary {
    @include colorsAction(primary);
  }
  &--secondary {
    @include colorsAction(secondary);
  }
  &--destructive {
    @include colorsAction(destructive);
  }
}
@keyframes circles-spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
