<template>
  <transition name="fade-in">
    <div
      v-show="visible"
      class="mm-spinner">
      <div
        :style="style"
        class="mm-spinner-mask"></div>
      <div class="mm-spinner-wrapper">
        <ui-loading
          :size="loadingSize"
          :color="loadingColor"></ui-loading>
        <div
          v-if="text"
          :style="textStyle"
          class="mm-spinner-text">
          {{ text }}
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Loading from "../loading"
import config from "../../managers/config"

config.defaults({
  "Spinner.text": "",
  "Spinner.background": undefined,
  "Spinner.loadingSize": "40px",
  "Spinner.loadingColor": "#2684FF",
  "Spinner.textStyle": "color: rgb(171, 173, 176);",
})

export default {
  name: "mm-spinner",
  components: {
    "ui-loading": Loading,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    target: {
      type: [String, Object],
      default: "",
    },
    text: {
      type: String,
      default: () => config.get("Spinner.text"),
    },
    background: {
      type: String,
      default: () => config.get("Spinner.background"),
    },
    loadingSize: {
      type: String,
      default: () => config.get("Spinner.loadingSize"),
    },
    loadingColor: {
      type: String,
      default: () => config.get("Spinner.loadingColor"),
    },
    textStyle: {
      type: [String, Object],
      default: () => config.get("Spinner.textStyle"),
    },
  },
  computed: {
    style() {
      return {
        backgroundColor: this.background,
      }
    },
  },
  mounted() {
    if (this.target) {
      const target = typeof this.target === "string" ? document.querySelector(this.target) : this.target
      if (target && target.appendChild) {
        target.appendChild(this.$el)
      }
    }
  },
  beforeDestroy() {
    this.$el.remove()
  },
}
</script>
