import { __extends, __assign, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { ImageLoadState, ImageCoverStyle, ImageFit } from './Image.types.js';
import BaseComponent from '../BaseComponent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';

var getClassNames = classNamesFunction();
var ImageBase = function(_super) {
  __extends(ImageBase2, _super);
  function ImageBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.loadState = ImageLoadState.notLoaded;
    return _this;
  }
  ImageBase2.prototype.render = function(h) {
    var _a = this, classNames = _a.classNames, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height;
    var $image = h("img", {
      attrs: __assign(__assign({}, this.$attrs), { src: src, alt: alt }),
      class: classNames.image,
      on: {
        load: this.onImageLoaded,
        error: this.onImageError
      }
    });
    return h("div", {
      class: classNames.root,
      style: { width: width + "px", height: height + "px" }
    }, [
      $image
    ]);
  };
  Object.defineProperty(ImageBase2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, loadState = _a.loadState, coverStyle = _a.coverStyle, imageFit = _a.imageFit, theme = _a.theme, className = _a.className, width = _a.width, height = _a.height, maximizeFrame = _a.maximizeFrame, shouldFadeIn = _a.shouldFadeIn, shouldStartVisible = _a.shouldStartVisible;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        width: width,
        height: height,
        maximizeFrame: maximizeFrame,
        shouldFadeIn: shouldFadeIn,
        shouldStartVisible: shouldStartVisible,
        isLoaded: loadState === ImageLoadState.loaded || loadState === ImageLoadState.notLoaded && shouldStartVisible,
        isLandscape: coverStyle === ImageCoverStyle.landscape,
        isCenter: imageFit === ImageFit.center,
        isCenterContain: imageFit === ImageFit.centerContain,
        isCenterCover: imageFit === ImageFit.centerCover,
        isContain: imageFit === ImageFit.contain,
        isCover: imageFit === ImageFit.cover,
        isNone: imageFit === ImageFit.none,
        isError: loadState === ImageLoadState.error,
        isNotImageFit: imageFit == null
      });
    },
    enumerable: false,
    configurable: true
  });
  ImageBase2.prototype.onImageLoaded = function() {
    this.loadState = ImageLoadState.loaded;
  };
  ImageBase2.prototype.onImageError = function() {
    this.loadState = ImageLoadState.error;
  };
  ImageBase2.svgRegex = /\.svg$/i;
  __decorate([
    Prop({ type: String, required: true }),
    __metadata("design:type", String)
  ], ImageBase2.prototype, "src", void 0);
  __decorate([
    Prop({ type: String, default: "" }),
    __metadata("design:type", String)
  ], ImageBase2.prototype, "alt", void 0);
  __decorate([
    Prop({ type: [String, Number], default: "" }),
    __metadata("design:type", Object)
  ], ImageBase2.prototype, "width", void 0);
  __decorate([
    Prop({ type: [String, Number], default: "" }),
    __metadata("design:type", Object)
  ], ImageBase2.prototype, "height", void 0);
  __decorate([
    Prop({ type: Number, default: null }),
    __metadata("design:type", Number)
  ], ImageBase2.prototype, "imageFit", void 0);
  __decorate([
    Prop({ type: Boolean, default: null }),
    __metadata("design:type", Boolean)
  ], ImageBase2.prototype, "maximizeFrame", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], ImageBase2.prototype, "shouldFadeIn", void 0);
  __decorate([
    Prop({ type: Boolean, default: null }),
    __metadata("design:type", Boolean)
  ], ImageBase2.prototype, "shouldStartVisible", void 0);
  __decorate([
    Prop({ type: Number, default: ImageCoverStyle.portrait }),
    __metadata("design:type", Number)
  ], ImageBase2.prototype, "coverStyle", void 0);
  ImageBase2 = __decorate([
    Component({
      inheritAttrs: false
    })
  ], ImageBase2);
  return ImageBase2;
}(BaseComponent);

export { ImageBase };
