<template>
  <div
    :class="{
      'spinner_container elevation-5': true,
      top: top && !bottom,
      bottom: bottom,
      left: left,
      right: right && !left,
    }"
    v-if="spinner"
  >
    <div class="content">
      <div class="spinner_icon successfull" v-if="spinnerSuccessful">
        <v-icon small color="white">fas fa-check</v-icon>
      </div>

      <div class="spinner_icon error" v-if="spinnerError">
        <v-icon small color="white">fas fa-times</v-icon>
      </div>

      <div class="loader" v-if="!spinnerSuccessful && !spinnerError"></div>
      <div class="text">{{ spinnerText }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "spinnerComponent",
  props: {
    showSpinner: {
      type: Boolean,
      default: true,
    },
    text: {
      default: null,
    },
    successful: {
      type: Boolean,
      default: false,
    },
    error: {
      type: Boolean,
      default: false,
    },
    top: {
      type: Boolean,
      default: true,
    },
    bottom: {
      type: Boolean,
      default: false,
    },
    left: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    spinner() {
      return this.showSpinner;
    },
    spinnerText() {
      return this.text
        ? this.text.replace(/{{(.*)}}/gim, (v) =>
            this.$t(v.slice(2, -2).trim())
          )
        : "";
    },
    spinnerSuccessful() {
      return this.successful;
    },
    spinnerError() {
      return this.error;
    },
  },
};
</script>

<style lang="scss" scoped>
$color: var(--v-primary-base);
$scale: 30px;

.spinner_container {
  position: absolute;
  display: inline-block;
  z-index: 999999999999999;
  &.top {
    top: 34px;
  }
  &.bottom {
    bottom: 34px;
  }
  &.left {
    left: 32px;
  }
  &.right {
    right: 32px;
  }
  border-radius: $scale;
  background-color: white;
  // transition: all 3s linear;

  .content {
    margin: 6px;

    .loader {
      position: unset;
    }

    .loader,
    .text,
    .spinner_icon {
      display: inline-block;
      line-height: $scale;
      vertical-align: middle;
    }
    .text {
      margin-left: 6px;
      margin-right: 10px;
      transition: all 3s linear;
    }
    .loader {
      width: $scale;
      height: $scale;
      margin-right: 6px;
      border-radius: 50%;
      border-top: 2px solid $color;
      border-left: 2px solid $color;
      border-bottom: 2px solid $color;
      border-right: 2px solid white;
      animation: rotate 1s ease;
      animation-iteration-count: infinite;
    }
    .spinner_icon {
      text-align: center;
      width: $scale;
      height: $scale;
      color: white;
      border-radius: $scale;

      &.successfull {
        background-color: rgb(12, 211, 78);
      }
      &.error {
        background-color: rgb(192, 41, 41);
      }

      i {
        color: inherit;
        line-height: $scale !important;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
