<template>
    <div
        :style="cssProps"
        class="loader"
        role="alert"
        aria-label="Loading new page"
        :class="[
            loaderColor,
            loaderPosition,
            allowPageInteraction ? 'allow-ui-interaction' : ''
        ]"
        @click="captureClick"></div>
</template>

<script>
export default {
    name: 'loader',
    /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
    props: {
        allowPageInteraction: {
            type: Boolean,
            default: false
        },
        /* Color options: red, green, blue, white, black */
        loaderColor: {
            type: String
        },
        /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
        loaderPosition: {
            type: String
        },
        width: {
            type: Number,
            default: 1
        },
        height: {
            type: Number,
            default: 1
        }
    },
    computed: {
        cssProps() {
            return {
                '--loader-width': `${this.width}rem`,
                '--loader-height': `${this.height}rem`
            };
        }
    },
    methods: {
        captureClick(event) {
            if (!this.allowPageInteraction) {
                event.stopPropagation();
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.loader {
  display: flex;

  //Open an overlay to prevent page interaction
  &:before {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: transparent;
      z-index: 9999;
      cursor: default;
  }

  &.date-picker-hidden {
    &:before {
        content: none;
    }
  }

  &.allow-ui-interaction::before {
    //no-block to enable clicking on certain buttons with loaders while the loader is actives
    pointer-events: none;
  }

  //Spinner basics
  &:after {
      content: "";
      mask: url(../../assets/img/icons/spinner.svg);
      mask-size: cover;
      position: relative;
      width: var(--loader-width);
      height: var(--loader-height);
      border-radius:50%;
      animation: rotation 1s infinite linear;
      @keyframes rotation {
          100% {
              transform: rotate(360deg);
          }
      }
  }
  //Spinner position
  &.center {
      justify-content: center;
  }
  &.right {
      right: 1rem;
  }
  &.left {
      left: 1rem;
  }
  //Spinner color
  &:after {
      background-color: var(--iss-loader-color);
  }
  &.red:after {
      background-color: $red;
  }
  &.green:after {
      background-color: $green;
  }
  &.blue:after {
      background-color: $blue;
  }
  &.white:after {
      background-color: $white;
  }
  &.black:after {
      background-color: $black;
  }
}
</style>
