import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import Icon from '../icon';
var NO_STYLE = {};
var HIDDEN_STYLE = {
    opacity: 0,
};
var Avatar = (function (_super) {
    __extends(Avatar, _super);
    function Avatar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.textNodeRef = createRef();
        _this.avatarNodeRef = createRef();
        _this.state = {
            textScale: 1,
            textReady: false,
        };
        return _this;
    }
    Avatar.prototype.render = function () {
        var _a = this.props, size = _a.size, shape = _a.shape, src = _a.src, icon = _a.icon, children = _a.children, bordered = _a.bordered, style = _a.style, className = _a.className;
        var useImage = !!src;
        var useString = !!children;
        var cls = cx('zent-avatar', className, {
            'zent-avatar--size-large': size === 'large',
            'zent-avatar--size-default': size === 'default',
            'zent-avatar--size-small': size === 'small',
            'zent-avatar--shape-circle': shape === 'circle',
            'zent-avatar--shape-square': shape === 'square',
            'zent-avatar--type-icon': !!icon,
            'zent-avatar--type-image': useImage,
            'zent-avatar--type-string': useString,
            'zent-avatar--bordered': bordered,
        });
        if (useImage) {
            return (_jsx("span", __assign({ style: style, className: cls, "data-zv": 'v10.0.12' }, { children: _jsx("img", { className: "zent-avatar-image", src: src, alt: "avatar", "data-zv": 'v10.0.12' }, void 0) }), void 0));
        }
        if (icon) {
            return (_jsx("span", __assign({ style: style, className: cls, "data-zv": 'v10.0.12' }, { children: _jsx(Icon, { type: icon }, void 0) }), void 0));
        }
        var _b = this.state, textScale = _b.textScale, textReady = _b.textReady;
        var textNode = this.textNodeRef.current;
        var textStyle = NO_STYLE;
        if (!textReady || !textNode) {
            textStyle = HIDDEN_STYLE;
        }
        else if (textScale === 1) {
            textStyle = NO_STYLE;
        }
        else {
            var textTransformString = "scale(" + textScale + ")";
            textStyle = {
                msTransform: textTransformString,
                WebkitTransform: textTransformString,
                MozTransform: textTransformString,
                transform: textTransformString,
                position: 'absolute',
                display: 'inline-block',
                left: "calc(50% - " + Math.floor(textNode.offsetWidth / 2) + "px)",
            };
        }
        var avatarStyle = typeof size === 'number'
            ? __assign({ width: size + "px", height: size + "px", lineHeight: size + "px" }, style) : style;
        return (_jsx("span", __assign({ style: avatarStyle, className: cls, ref: this.avatarNodeRef, "data-zv": 'v10.0.12' }, { children: _jsx("span", __assign({ className: "zent-avatar-string", style: textStyle, ref: this.textNodeRef, "data-zv": 'v10.0.12' }, { children: children }), void 0) }), void 0));
    };
    Avatar.prototype.componentDidMount = function () {
        this.updateTextScale();
    };
    Avatar.getDerivedStateFromProps = function (_a, _b) {
        var children = _a.children;
        var prevChildren = _b.prevChildren;
        if (children !== prevChildren) {
            return {
                textReady: false,
                prevChildren: children,
            };
        }
        return null;
    };
    Avatar.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.children !== this.props.children) {
            this.updateTextScale();
        }
    };
    Avatar.prototype.updateTextScale = function () {
        var children = this.props.children;
        if (children) {
            var scale = fitText(this.avatarNodeRef.current, this.textNodeRef.current);
            this.setState({
                textScale: scale,
                textReady: true,
            });
        }
    };
    Avatar.defaultProps = {
        shape: 'circle',
        size: 'default',
        bordered: false,
    };
    return Avatar;
}(Component));
export { Avatar };
function fitText(containerNode, textNode) {
    if (!containerNode || !textNode) {
        return 1;
    }
    var containerWidth = containerNode.getBoundingClientRect().width;
    var textWidth = textNode.offsetWidth;
    var visualWidth = containerWidth - 6;
    if (visualWidth > textWidth) {
        return 1;
    }
    return visualWidth / textWidth;
}
export default Avatar;
