<style>
  .loading-show{
    display: block;
  }
</style>
<template>
  <div class="loader__overlay" v-show="loadingState" :class="{'loading-show':loadingState}">
    <div class="loader--centered" :class="{'load-tester': isLoadSpinner, 'load-large': isSetSize,'loader--light': islight }">
      <div :class="{ 'loader__spinner': isLoader, 'lightbox-spinner': isBox,'spinner': isSpinner }">
        <i></i>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 't-loading',
    data: function () {
      return {
        loadingState: false,
        isLoadSpinner: false,
        isLoader: false,
        isBox: false,
        isSpinner: false,
        isSetSize: false,
        islight: false
      };
    },
    props: {
      enabled: {
        default: true,
        type: Boolean
      },
      loadType: {
        default: 'loader',
        type: String
      },
      size: {
        default: '',
        type: String
      },
      lightColor: {
        default: false,
        type: Boolean
      }
    },
    created: function (obj) {
      this.loadingState = this.enabled;
      let target = (obj != null) ? obj.loadType : this.loadType;
      if (target === 'loader') {
        this.isLoader = true;
        this.islight = this.lightColor;
        this.isBox = this.isSpinner = false;
      } else if (target === 'circle') {
        this.isBox = true;
        this.isLoader = this.isSpinner = false;
      } else if (target === 'spinner') {
        this.isLoadSpinner = true;
        this.isSpinner = true;
        this.isLoader = this.isBox = false;
      }
      let loadSize = (obj != null) ? obj.loadSize : this.size;
      if (loadSize === 'large' && target !== 'spinner') {
        console.info('This type cannot be large');
      } else if (loadSize === 'large' && target === 'spinner') {
        this.isSetSize = true;
      }
    },
    methods: {
      showLoading: function (obj) {
        this.loadingState = true;
        let target = (obj != null) ? obj.loadType : this.loadType;
        if (target === 'loader') {
          this.isLoader = true;
          this.islight = this.lightColor;
          this.isBox = this.isSpinner = false;
        } else if (target === 'circle') {
          this.isBox = true;
          this.isLoader = this.isSpinner = false;
        } else if (target === 'spinner') {
          this.isLoadSpinner = true;
          this.isSpinner = true;
          this.isLoader = this.isBox = false;
        }
        let loadSize = (obj != null) ? obj.loadSize : this.size;
        if (loadSize === 'large' && target !== 'spinner') {
          console.info('This type cannot be large');
        } else if (loadSize === 'large' && target === 'spinner') {
          this.isSetSize = true;
        }
      },
      hideLoading: function () {
        this.loadingState = false;
      }
    },
    watch: {
      loadingState: function () {
        if (this.loadingState) {
          this.$emit('on-loading-visible');
        } else {
          this.$emit('on-loading-hidden');
        }
      }
    }
  };
</script>
