import { __assign, __rest } from "tslib";
import React, { useRef, useEffect, useState, useContext } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var Avatar = function (props) {
    var _a;
    var _b = props.size, size = _b === void 0 ? 38 : _b, _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.presence, presence = _d === void 0 ? undefined : _d, _e = props.alt, alt = _e === void 0 ? 'avatar' : _e, icon = props.icon, src = props.src, children = props.children, className = props.className, style = props.style, onClick = props.onClick, customisedCls = props.prefixCls, otherProps = __rest(props, ["size", "shape", "presence", "alt", "icon", "src", "children", "className", "style", "onClick", "prefixCls"]);
    var outerEl = useRef(null);
    var textEl = useRef(null);
    var _f = useState(1), scale = _f[0], setScale = _f[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('avatar', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, prefixCls + "_" + shape, (_a = {},
        _a[prefixCls + "_clickable"] = onClick,
        _a));
    var renderChildren = function () {
        if (typeof children === 'string') {
            var textStyle = {};
            if (textEl.current) {
                var transformString = "scale(" + scale + ") translateX(-50%)";
                textStyle = {
                    msTransform: transformString,
                    WebkitTransform: transformString,
                    transform: transformString,
                };
            }
            return (React.createElement("span", { ref: textEl, className: prefixCls + "__text", style: textStyle }, children));
        }
        else {
            return children;
        }
    };
    var renderItem = function () {
        if (children) {
            return renderChildren();
        }
        else if (src) {
            return React.createElement("img", { src: src, alt: alt, className: prefixCls + "__img" });
        }
        else {
            return icon;
        }
    };
    var renderPresence = function () {
        return React.createElement("i", { className: prefixCls + "__presence " + prefixCls + "__presence_" + presence });
    };
    var styles = __assign({ width: size, height: size, fontSize: size / 2, lineHeight: size - 4 + "px" }, style);
    useEffect(function () {
        if (outerEl.current && textEl.current && textEl.current.className === prefixCls + "__text") {
            var textElWidth = textEl.current.offsetWidth;
            var outerElWidth = outerEl.current.offsetWidth;
            if (outerElWidth - 8 < textElWidth) {
                setScale((outerElWidth - 8) / textElWidth);
            }
            else {
                setScale(1);
            }
        }
    });
    return (React.createElement("span", __assign({}, otherProps, { ref: outerEl, className: cls, style: styles }),
        renderItem(),
        presence && renderPresence()));
};
Avatar.displayName = 'Avatar';
export default Avatar;
//# sourceMappingURL=avatar.js.map