define(["require", "exports", "tslib", "react", "../../Utilities", "./Image.types"], function (require, exports, tslib_1, React, Utilities_1, Image_types_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_1.classNamesFunction();
    var KEY_PREFIX = 'fabricImage';
    var ImageBase = /** @class */ (function (_super) {
        tslib_1.__extends(ImageBase, _super);
        function ImageBase(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 = Image_types_1.ImageCoverStyle.portrait;
            _this._imageElement = React.createRef();
            _this._frameElement = React.createRef();
            _this._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_types_1.ImageLoadState.loaded
                    });
                }
            };
            _this._onImageError = function (ev) {
                if (_this.props.onError) {
                    _this.props.onError(ev);
                }
                _this.setState({
                    loadState: Image_types_1.ImageLoadState.error
                });
            };
            _this.state = {
                loadState: Image_types_1.ImageLoadState.notLoaded
            };
            return _this;
        }
        // tslint:disable-next-line function-name
        ImageBase.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
            if (nextProps.src !== this.props.src) {
                this.setState({
                    loadState: Image_types_1.ImageLoadState.notLoaded
                });
            }
            else if (this.state.loadState === Image_types_1.ImageLoadState.loaded) {
                this._computeCoverStyle(nextProps);
            }
        };
        ImageBase.prototype.componentDidUpdate = function (prevProps, prevState) {
            this._checkImageLoaded();
            if (this.props.onLoadingStateChange && prevState.loadState !== this.state.loadState) {
                this.props.onLoadingStateChange(this.state.loadState);
            }
        };
        ImageBase.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, shouldStartVisible = _a.shouldStartVisible, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame, styles = _a.styles, theme = _a.theme;
            var loadState = this.state.loadState;
            var coverStyle = this.props.coverStyle !== undefined ? this.props.coverStyle : this._coverStyle;
            var classNames = getClassNames(styles, {
                theme: theme,
                className: className,
                width: width,
                height: height,
                maximizeFrame: maximizeFrame,
                shouldFadeIn: shouldFadeIn,
                shouldStartVisible: shouldStartVisible,
                isLoaded: loadState === Image_types_1.ImageLoadState.loaded || (loadState === Image_types_1.ImageLoadState.notLoaded && this.props.shouldStartVisible),
                isLandscape: coverStyle === Image_types_1.ImageCoverStyle.landscape,
                isCenter: imageFit === Image_types_1.ImageFit.center,
                isCenterContain: imageFit === Image_types_1.ImageFit.centerContain,
                isCenterCover: imageFit === Image_types_1.ImageFit.centerCover,
                isContain: imageFit === Image_types_1.ImageFit.contain,
                isCover: imageFit === Image_types_1.ImageFit.cover,
                isNone: imageFit === Image_types_1.ImageFit.none,
                isError: loadState === Image_types_1.ImageLoadState.error,
                isNotImageFit: imageFit === undefined
            });
            // If image dimensions aren't specified, the natural size of the image is used.
            return (React.createElement("div", { className: classNames.root, style: { width: width, height: height }, ref: this._frameElement },
                React.createElement("img", tslib_1.__assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: classNames.image, ref: this._imageElement, src: src, alt: alt, role: role }))));
        };
        ImageBase.prototype._checkImageLoaded = function () {
            var src = this.props.src;
            var loadState = this.state.loadState;
            if (loadState === Image_types_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 = this._imageElement.current
                    ? (src && (this._imageElement.current.naturalWidth > 0 && this._imageElement.current.naturalHeight > 0)) ||
                        (this._imageElement.current.complete && ImageBase._svgRegex.test(src))
                    : false;
                if (isLoaded) {
                    this._computeCoverStyle(this.props);
                    this.setState({
                        loadState: Image_types_1.ImageLoadState.loaded
                    });
                }
            }
        };
        ImageBase.prototype._computeCoverStyle = function (props) {
            var imageFit = props.imageFit, width = props.width, height = props.height;
            // Do not compute cover style if it was already specified in props
            if ((imageFit === Image_types_1.ImageFit.cover ||
                imageFit === Image_types_1.ImageFit.contain ||
                imageFit === Image_types_1.ImageFit.centerContain ||
                imageFit === Image_types_1.ImageFit.centerCover) &&
                this.props.coverStyle === undefined &&
                this._imageElement.current &&
                this._frameElement.current) {
                // 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 && imageFit !== Image_types_1.ImageFit.centerContain && imageFit !== Image_types_1.ImageFit.centerCover) {
                    desiredRatio = width / height;
                }
                else {
                    desiredRatio = this._frameElement.current.clientWidth / this._frameElement.current.clientHeight;
                }
                // Examine the source image to determine its original ratio.
                var naturalRatio = this._imageElement.current.naturalWidth / this._imageElement.current.naturalHeight;
                // Should we crop from the top or the sides?
                if (naturalRatio > desiredRatio) {
                    this._coverStyle = Image_types_1.ImageCoverStyle.landscape;
                }
                else {
                    this._coverStyle = Image_types_1.ImageCoverStyle.portrait;
                }
            }
        };
        ImageBase.defaultProps = {
            shouldFadeIn: true
        };
        ImageBase._svgRegex = /\.svg$/i;
        return ImageBase;
    }(React.Component));
    exports.ImageBase = ImageBase;
});
//# sourceMappingURL=Image.base.js.map