import * as tslib_1 from "tslib";
import * as React from 'react';
import { useRef, useEffect, useState } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
var defaultProps = {
    prefixCls: 'ty-avatar',
    size: 35,
    shape: 'circle',
    icon: 'user',
};
var Avatar = function (props) {
    var _a;
    var icon = props.icon, shape = props.shape, size = props.size, src = props.src, alt = props.alt, onClick = props.onClick, children = props.children, prefixCls = props.prefixCls, className = props.className, style = props.style;
    var outerEl = useRef(null);
    var textEl = useRef(null);
    var _b = useState(1), scale = _b[0], setScale = _b[1];
    var cls = classNames(prefixCls, className, prefixCls + "_" + shape, (_a = {},
        _a[prefixCls + "_clickable"] = onClick,
        _a));
    var renderItem = function () {
        if (children) {
            return renderChildren();
        }
        else if (src) {
            return React.createElement("img", { src: src, alt: alt, className: prefixCls + "__img" });
        }
        else {
            return React.createElement(Icon, { type: icon, className: prefixCls + "__icon", size: size - 10 });
        }
    };
    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 styles = tslib_1.__assign({ width: size, height: size, lineHeight: size + "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", { ref: outerEl, className: cls, style: styles, onClick: onClick }, renderItem()));
};
Avatar.defaultProps = defaultProps;
export default Avatar;
//# sourceMappingURL=index.js.map