import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Watch, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { ShimmerElementsGroup } from './ShimmerElementsGroup/ShimmerElementsGroup.js';

var getClassNames = classNamesFunction();
var TRANSITION_ANIMATION_INTERVAL = 200;
var ShimmerBase = function(_super) {
  __extends(ShimmerBase2, _super);
  function ShimmerBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.contentLoaded = _this.isDataLoaded;
    return _this;
  }
  Object.defineProperty(ShimmerBase2.prototype, "classNames", {
    get: function() {
      var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, shimmerColors = _a.shimmerColors;
      return getClassNames(styles, {
        theme: theme,
        isDataLoaded: false,
        className: className,
        transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL,
        shimmerColor: shimmerColors && shimmerColors.shimmer,
        shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave
      });
    },
    enumerable: false,
    configurable: true
  });
  ShimmerBase2.prototype.beforeDestroy = function() {
    this._async.dispose();
  };
  ShimmerBase2.prototype.componentDidUpdate = function(newVal, oldVal) {
    var _this = this;
    if (newVal === oldVal)
      return;
    if (this.isDataLoaded) {
      this.lastTimeoutId = this._async.setTimeout(function() {
        _this.contentLoaded = _this.isDataLoaded;
      }, TRANSITION_ANIMATION_INTERVAL);
    } else {
      this.contentLoaded = this.isDataLoaded;
    }
  };
  ShimmerBase2.prototype.render = function(h) {
    var _a = this, classNames = _a.classNames, width = _a.width, shimmerElements = _a.shimmerElements, shimmerColors = _a.shimmerColors;
    return h("div", {
      class: classNames.root
    }, [
      h("div", {
        style: { width: width || "100%" },
        class: classNames.shimmerWrapper
      }, [
        h("div", { class: classNames.shimmerGradient }),
        h(ShimmerElementsGroup, {
          attrs: {
            shimmerElements: shimmerElements,
            backgroundColor: shimmerColors && shimmerColors.background
          }
        })
      ])
    ]);
  };
  __decorate([
    Prop({ default: null }),
    __metadata("design:type", Object)
  ], ShimmerBase2.prototype, "shimmerColors", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ShimmerBase2.prototype, "isDataLoaded", void 0);
  __decorate([
    Prop({ type: Array, default: void 0 }),
    __metadata("design:type", Array)
  ], ShimmerBase2.prototype, "shimmerElements", void 0);
  __decorate([
    Prop({ type: [Number, String], default: null }),
    __metadata("design:type", Object)
  ], ShimmerBase2.prototype, "width", void 0);
  __decorate([
    Watch("isDataLoaded"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
  ], ShimmerBase2.prototype, "componentDidUpdate", null);
  ShimmerBase2 = __decorate([
    Component({
      components: { ShimmerElementsGroup: ShimmerElementsGroup }
    })
  ], ShimmerBase2);
  return ShimmerBase2;
}(BaseComponent);

export { ShimmerBase };
