<script lang="ts">
// Export for unit tests
export function transformIntoPx(totransform: string | number) {
  return typeof totransform === 'string' ? totransform : `${totransform}px`;
}
</script>

<script setup lang="ts">
import { computed, useId } from 'vue';
import { StatusType } from '@/models';

const gradientId = useId();

const props = withDefaults(
  defineProps<{
    size?: string | number;
    mode?: StatusType;
  }>(),
  { size: 'inherit', mode: StatusType.Default },
);

const sizeInPx = computed<string>(() => {
  return transformIntoPx(props.size);
});
</script>

<template>
  <div class="bms-loader" :class="mode">
    <svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient
          x1="8.042%"
          y1="0%"
          x2="65.682%"
          y2="23.865%"
          :id="gradientId"
        >
          <stop stop-color="currentColor" stop-opacity="0" offset="0%" />
          <stop
            stop-color="currentColor"
            stop-opacity=".631"
            offset="63.146%"
          />
          <stop stop-color="currentColor" offset="100%" />
        </linearGradient>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <g transform="translate(1 1)">
          <path
            d="M36 18c0-9.94-8.06-18-18-18"
            id="Oval-2"
            :stroke="`url(#${gradientId})`"
            stroke-width="2"
          >
            <animateTransform
              attributeName="transform"
              type="rotate"
              from="0 18 18"
              to="360 18 18"
              dur="0.9s"
              repeatCount="indefinite"
            />
          </path>
          <circle fill="#fff" cx="36" cy="18" r="1">
            <animateTransform
              attributeName="transform"
              type="rotate"
              from="0 18 18"
              to="360 18 18"
              dur="0.9s"
              repeatCount="indefinite"
            />
          </circle>
        </g>
      </g>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
.bms-loader {
  font-size: v-bind('sizeInPx');
  color: var(--bms-main-100);
  display: inline-block;

  &.warning {
    color: var(--bms-orange-100);
  }

  &.danger {
    color: var(--bms-red-100);
  }

  &.information {
    color: var(--bms-grey-100);
  }

  &.success {
    color: var(--bms-green-100);
  }

  svg {
    width: 1em;
    height: 1em;
    display: block;
  }
}
</style>
