<template>
  <div
    class="sam-loader"
    :class="loaderClassObj"
    :style="loaderStyleObj"
    data-samora
  >
    <svg
      ref="spinner"
      class="spinner"
      width="34"
      height="34"
      version="1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g
        transform="translate(2 2)"
        stroke-width="4"
        fill="none"
        fill-rule="evenodd"
      >
        <circle
          class="spinner__track"
          cx="15"
          cy="15"
          r="15"
        />
        <path
          class="spinner__progress"
          d="M15 0a15 15 0 1 0 15 15"
          stroke-linecap="round"
        />
      </g>
    </svg>
  </div>
</template>

<script>
import SAMORA_TYPES from '../../../utils/constants/samora-types.enum';

const { LOADER: SAMORA_LOADER_TYPES } = SAMORA_TYPES;

export const LOADER_TYPES = {
  SPINNER: SAMORA_LOADER_TYPES.SPINNER,
  DOTS: SAMORA_LOADER_TYPES.DOTS,
};

export default {
  name: 'SamLoader',
  props: {
    /**
     * If the Loader is active
     * @values true, false
     */
    active: {
      type: Boolean,
      required: false,
      default: false,
    },
    /**
     * If the Loader is global
     * @values true, false
     */
    isGlobal: {
      type: Boolean,
      required: false,
      default: true,
    },
    /**
     * The Loader size
     */
    size: {
      type: Number,
      required: false,
      default: 34,
    },
    /** @ignore */
    samType: {
      required: false,
      default: 'spinner',
      validator: (val) => Object.values(LOADER_TYPES).includes(val),
    },
  },
  computed: {
    loaderClassObj() {
      return {
        'd-flex': this.active,
        'd-none': !this.active,
        'is-global elevation--4': this.isGlobal,
      };
    },
    loaderStyleObj() {
      if (this.size === 34) {
        return {};
      }
      const scaleFactor = this.size / 34;
      return {
        transform: `scale3d(${scaleFactor}, ${scaleFactor}, ${scaleFactor})`,
      };
    },
  },
  mounted() {
    this.syncAnimation();
  },
  updated() {
    this.syncAnimation();
  },
  methods: {
    syncAnimation() {
      // sync spinner with other spinners
      const currentSpinner = this.$refs.spinner;
      if (!currentSpinner?.getAnimations) {
        return;
      }
      const currentAnimation = currentSpinner.getAnimations()[0];
      if (!currentAnimation) {
        return;
      }
      // get other spinner elements
      const otherAnimationElements = document.querySelectorAll('.sam-loader .spinner');
      for (let i = 0; i < otherAnimationElements.length; i += 1) {
        // ignore current element
        if (otherAnimationElements[i] !== currentSpinner) {
          // get animation object
          const otherAnimation = otherAnimationElements[i].getAnimations()[0];
          if (otherAnimation) {
            // sync clocks of current animation
            currentAnimation.currentTime = otherAnimation.currentTime;
            break;
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sam-loader {
  @extend .items-center, .justify-center;

  &.is-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: $pure--white, $alpha: 0.5);
  }

  .spinner {
    width: 34px;
    height: 34px;
    animation: spin 1.5s ease infinite;

    .spinner__track {
      stroke: $neutral--20;
    }

    .spinner__progress {
      stroke: $accent--unbabel-blue;
    }
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
</style>
