import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { classNamesFunction } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';
var getClassNames = classNamesFunction();
var SVG_REGEX = /\.svg$/i;
var KEY_PREFIX = 'fabricImage';
export var ImageBase = Vue.extend({
    props: __assign({ src: { type: String, required: true }, alt: { type: String, default: '' }, width: { type: [String, Number], default: '' }, height: { type: [String, Number], default: '' }, imageFit: { type: Number, default: null }, maximizeFrame: { type: Boolean, default: null }, shouldFadeIn: { type: Boolean, default: true }, shouldStartVisible: { type: Boolean, default: null }, coverStyle: { type: Number, default: ImageCoverStyle.portrait } }, withThemeableProps()),
    data: function () {
        return {
            loadState: ImageLoadState.notLoaded,
        };
    },
    computed: {
        classNames: 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,
            });
        },
    },
    methods: {
        onImageLoaded: function () {
            this.loadState = ImageLoadState.loaded;
        },
        onImageError: function () {
            this.loadState = ImageLoadState.error;
        },
    },
    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,
        ]);
    },
});
//# sourceMappingURL=Image.base.js.map