<template>
  <svg
    id="loader-1"
    class="cpLoader"
    :class="dynamicClasses"
    enable-background="new 0 0 40 40"
    :height="40"
    version="1.1"
    viewBox="0 0 40 40"
    :width="40"
    x="0px"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg"
    y="0px"
  >
    <path
      d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
      fill="currentColor"
      opacity="0.2"
    />
    <path
      d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0    C22.32,8.481,24.301,9.057,26.013,10.047z"
      fill="currentColor"
    >
      <animateTransform
        attributeName="transform"
        attributeType="xml"
        :dur="formatedDuration"
        from="0 20 20"
        repeatCount="indefinite"
        to="360 20 20"
        type="rotate"
      />
    </path>
  </svg>
</template>

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

import { Colors } from '@/constants'
import { capitalizeFirstLetter } from '@/helpers'

type LoaderColor = Extract<Colors, 'neutral' | 'accent' | 'error' | 'warning' | 'success'>
type LoaderSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'

interface Props {
  color?: LoaderColor
  duration?: number
  size?: LoaderSize
}

const props = withDefaults(defineProps<Props>(), { color: 'accent', duration: 700, size: 'sm' })

const formatedDuration = computed(() => `${props.duration}ms`)

const dynamicClasses = computed(() => {
  return [`cpLoader--is${capitalizeFirstLetter(props.color)}`, `cpLoader--${props.size}`]
})
</script>

<style lang="scss">
@mixin cp-loader-themed($className, $color) {
  &--is#{$className} {
    color: $color;
  }
}

.cpLoader {
  @include cp-loader-themed('Neutral', var(--cp-utility-neutral-500));
  @include cp-loader-themed('Accent', var(--cp-foreground-accent-primary));
  @include cp-loader-themed('Error', var(--cp-foreground-error-secondary));
  @include cp-loader-themed('Warning', var(--cp-foreground-warning-secondary));
  @include cp-loader-themed('Success', var(--cp-foreground-success-secondary));

  &--2xs {
    @include mx.square-sizing(16);
  }

  &--xs {
    @include mx.square-sizing(20);
  }

  &--sm {
    @include mx.square-sizing(24);
  }

  &--md {
    @include mx.square-sizing(32);
  }

  &--lg {
    @include mx.square-sizing(40);
  }

  &--xl {
    @include mx.square-sizing(48);
  }

  &--2xl {
    @include mx.square-sizing(64);
  }

  &--3xl {
    @include mx.square-sizing(96);
  }
}
</style>
