var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Image.Props", "./Image.scss"], function (require, exports, React, Utilities_1, Image_Props_1, Image_scss_1) {
    "use strict";
    var CoverStyle;
    (function (CoverStyle) {
        CoverStyle[CoverStyle["landscape"] = 0] = "landscape";
        CoverStyle[CoverStyle["portrait"] = 1] = "portrait";
    })(CoverStyle = exports.CoverStyle || (exports.CoverStyle = {}));
    exports.CoverStyleMap = (_a = {},
        _a[CoverStyle.landscape] = 'ms-Image-image--landscape ' + Image_scss_1.default.imageIsLandscape,
        _a[CoverStyle.portrait] = 'ms-Image-image--portrait ' + Image_scss_1.default.imageIsPortrait,
        _a);
    exports.ImageFitMap = (_b = {},
        _b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center ' + Image_scss_1.default.imageIsCenter,
        _b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain ' + Image_scss_1.default.imageIsContain,
        _b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover ' + Image_scss_1.default.imageIsCover,
        _b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none ' + Image_scss_1.default.imageIsNone,
        _b);
    var KEY_PREFIX = 'fabricImage';
    var Image = (function (_super) {
        __extends(Image, _super);
        function Image(props) {
            var _this = _super.call(this, props) || this;
            // Make an initial assumption about the image layout until we can
            // check the rendered element. The value here only takes effect when
            // shouldStartVisible is true.
            _this._coverStyle = CoverStyle.portrait;
            _this.state = {
                loadState: Image_Props_1.ImageLoadState.notLoaded
            };
            return _this;
        }
        Image.prototype.componentWillReceiveProps = function (nextProps) {
            if (nextProps.src !== this.props.src) {
                this.setState({
                    loadState: Image_Props_1.ImageLoadState.notLoaded
                });
            }
            else if (this.state.loadState === Image_Props_1.ImageLoadState.loaded) {
                this._computeCoverStyle(nextProps);
            }
        };
        Image.prototype.componentDidUpdate = function (prevProps, prevState) {
            this._checkImageLoaded();
            if (this.props.onLoadingStateChange
                && prevState.loadState !== this.state.loadState) {
                this.props.onLoadingStateChange(this.state.loadState);
            }
        };
        Image.prototype.render = function () {
            var imageProps = Utilities_1.getNativeProps(this.props, Utilities_1.imageProperties, ['width', 'height']);
            var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame;
            var loadState = this.state.loadState;
            var coverStyle = this._coverStyle;
            var loaded = loadState === Image_Props_1.ImageLoadState.loaded || (loadState === Image_Props_1.ImageLoadState.notLoaded && this.props.shouldStartVisible);
            // If image dimensions aren't specified, the natural size of the image is used.
            return (React.createElement("div", { className: Utilities_1.css('ms-Image', Image_scss_1.default.root, className, (_b = {},
                    _b['ms-Image--maximizeFrame ' + Image_scss_1.default.rootIsMaximizeFrame] = maximizeFrame,
                    _b)), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') },
                React.createElement("img", __assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: Utilities_1.css('ms-Image-image', Image_scss_1.default.image, exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], (_c = {
                            'is-fadeIn': shouldFadeIn,
                            'is-notLoaded': !loaded
                        },
                        _c['is-loaded ' + Image_scss_1.default.imageIsLoaded] = loaded,
                        _c['ms-u-fadeIn400'] = loaded && shouldFadeIn,
                        _c['is-error'] = loadState === Image_Props_1.ImageLoadState.error,
                        _c['ms-Image-image--scaleWidth ' + Image_scss_1.default.imageIsScaleWidth] = (imageFit === undefined && !!width && !height),
                        _c['ms-Image-image--scaleHeight ' + Image_scss_1.default.imageIsScaleHeight] = (imageFit === undefined && !width && !!height),
                        _c['ms-Image-image--scaleWidthHeight ' + Image_scss_1.default.imageIsScaleWidthHeight] = (imageFit === undefined && !!width && !!height),
                        _c)), ref: this._resolveRef('_imageElement'), src: src, alt: alt, role: role }))));
            var _b, _c;
        };
        Image.prototype._onImageLoaded = function (ev) {
            var _a = this.props, src = _a.src, onLoad = _a.onLoad;
            if (onLoad) {
                onLoad(ev);
            }
            this._computeCoverStyle(this.props);
            if (src) {
                this.setState({
                    loadState: Image_Props_1.ImageLoadState.loaded
                });
            }
        };
        Image.prototype._checkImageLoaded = function () {
            var src = this.props.src;
            var loadState = this.state.loadState;
            if (loadState === Image_Props_1.ImageLoadState.notLoaded) {
                // testing if naturalWidth and naturalHeight are greater than zero is better than checking
                // .complete, because .complete will also be set to true if the image breaks. However,
                // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
                // to checking .complete for these images.
                var isLoaded = src && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
                    (this._imageElement.complete && Image._svgRegex.test(src));
                if (isLoaded) {
                    this._computeCoverStyle(this.props);
                    this.setState({
                        loadState: Image_Props_1.ImageLoadState.loaded
                    });
                }
            }
        };
        Image.prototype._computeCoverStyle = function (props) {
            var imageFit = props.imageFit, width = props.width, height = props.height;
            if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) {
                if (this._imageElement) {
                    // Determine the desired ratio using the width and height props.
                    // If those props aren't available, measure measure the frame.
                    var desiredRatio = void 0;
                    if (!!width && !!height) {
                        desiredRatio = width / height;
                    }
                    else {
                        desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
                    }
                    // Examine the source image to determine its original ratio.
                    var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
                    // Should we crop from the top or the sides?
                    if (naturalRatio > desiredRatio) {
                        this._coverStyle = CoverStyle.landscape;
                    }
                    else {
                        this._coverStyle = CoverStyle.portrait;
                    }
                }
            }
        };
        Image.prototype._onImageError = function (ev) {
            if (this.props.onError) {
                this.props.onError(ev);
            }
            this.setState({
                loadState: Image_Props_1.ImageLoadState.error
            });
        };
        return Image;
    }(Utilities_1.BaseComponent));
    Image.defaultProps = {
        shouldFadeIn: true
    };
    Image._svgRegex = /\.svg$/i;
    __decorate([
        Utilities_1.autobind
    ], Image.prototype, "_onImageLoaded", null);
    __decorate([
        Utilities_1.autobind
    ], Image.prototype, "_onImageError", null);
    exports.Image = Image;
    var _a, _b;
});

//# sourceMappingURL=Image.js.map
