"use strict";
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;
};
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var css_1 = require("../../utilities/css");
var BaseComponent_1 = require("../../common/BaseComponent");
var properties_1 = require("../../utilities/properties");
var Image_Props_1 = require("./Image.Props");
require("./Image.scss");
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',
    _a[CoverStyle.portrait] = 'ms-Image-image--portrait',
    _a);
exports.ImageFitMap = (_b = {},
    _b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center',
    _b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain',
    _b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover',
    _b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none',
    _b);
var ImageLoadState;
(function (ImageLoadState) {
    ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded";
    ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded";
    ImageLoadState[ImageLoadState["error"] = 2] = "error";
    ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded";
})(ImageLoadState = exports.ImageLoadState || (exports.ImageLoadState = {}));
var Image = (function (_super) {
    __extends(Image, _super);
    function Image(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            loadState: ImageLoadState.notLoaded
        };
        return _this;
    }
    Image.prototype.componentDidMount = function () {
        if (!this._evaluateImage()) {
            this._events.on(this._imageElement, 'load', this._evaluateImage);
            this._events.on(this._imageElement, 'error', this._setError);
        }
    };
    Image.prototype.componentWillReceiveProps = function (nextProps) {
        if (this.state.loadState === ImageLoadState.loaded) {
            var nextHeight = nextProps.height, nextWidth = nextProps.width;
            var _a = this.props, height = _a.height, width = _a.width;
            if (height !== nextHeight || width !== nextWidth) {
                this._computeCoverStyle(nextProps);
            }
        }
    };
    Image.prototype.render = function () {
        var imageProps = properties_1.getNativeProps(this.props, properties_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, errorSrc = _a.errorSrc, role = _a.role;
        var loadState = this.state.loadState;
        var coverStyle = this._coverStyle;
        var loaded = loadState === ImageLoadState.loaded || loadState === ImageLoadState.errorLoaded;
        var srcToDisplay = (loadState === ImageLoadState.error || loadState === ImageLoadState.errorLoaded) ? errorSrc : src;
        // If image dimensions aren't specified, the natural size of the image is used.
        return (React.createElement("div", { className: css_1.css('ms-Image', className), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') },
            React.createElement("img", __assign({}, imageProps, { className: css_1.css('ms-Image-image', (coverStyle !== undefined) && exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], {
                    'is-fadeIn': shouldFadeIn,
                    'is-notLoaded': !loaded,
                    'is-loaded': loaded,
                    'ms-u-fadeIn400': loaded && shouldFadeIn,
                    'is-error': loadState === ImageLoadState.error,
                    'ms-Image-image--scaleWidth': (imageFit === undefined && !!width && !height),
                    'ms-Image-image--scaleHeight': (imageFit === undefined && !width && !!height),
                    'ms-Image-image--scaleWidthHeight': (imageFit === undefined && !!width && !!height),
                }), ref: this._resolveRef('_imageElement'), src: srcToDisplay, alt: alt, role: role }))));
    };
    Image.prototype._evaluateImage = function () {
        var src = this.props.src;
        var loadState = this.state.loadState;
        var isLoaded = (src && this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0);
        this._computeCoverStyle(this.props);
        if (isLoaded && loadState !== ImageLoadState.loaded && loadState !== ImageLoadState.errorLoaded) {
            this._events.off();
            this.setState({
                loadState: loadState === ImageLoadState.error ? ImageLoadState.errorLoaded : ImageLoadState.loaded
            });
        }
        return isLoaded;
    };
    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._setError = function () {
        if (this.state.loadState !== ImageLoadState.error && this.state.loadState !== ImageLoadState.errorLoaded) {
            this.setState({
                loadState: ImageLoadState.error
            });
        }
    };
    return Image;
}(BaseComponent_1.BaseComponent));
Image.defaultProps = {
    shouldFadeIn: true
};
exports.Image = Image;
var _a, _b;

//# sourceMappingURL=Image.js.map
