"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vueuc_1 = require("vueuc");
const _mixins_1 = require("../../_mixins");
const styles_1 = require("../styles");
const _utils_1 = require("../../_utils");
const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
const avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
        type: [String, Number],
        default: 'medium'
    }, src: String, circle: Boolean, color: String, objectFit: {
        type: String,
        default: 'fill'
    }, round: Boolean, onError: Function });
exports.default = (0, vue_1.defineComponent)({
    name: 'Avatar',
    props: avatarProps,
    setup(props) {
        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
        let memoedTextHtml = null;
        const textRef = (0, vue_1.ref)(null);
        const selfRef = (0, vue_1.ref)(null);
        const fitTextTransform = () => {
            const { value: textEl } = textRef;
            if (textEl) {
                if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
                    memoedTextHtml = textEl.innerHTML;
                    const { value: selfEl } = selfRef;
                    if (selfEl) {
                        const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl;
                        const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl;
                        const radix = 0.9;
                        const ratio = Math.min((elWidth / textWidth) * radix, (elHeight / textHeight) * radix, 1);
                        textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`;
                    }
                }
            }
        };
        const themeRef = (0, _mixins_1.useTheme)('Avatar', 'Avatar', index_cssr_1.default, styles_1.avatarLight, props, mergedClsPrefixRef);
        return {
            textRef,
            selfRef,
            mergedClsPrefix: mergedClsPrefixRef,
            fitTextTransform,
            cssVars: (0, vue_1.computed)(() => {
                const { size, round, circle } = props;
                const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
                let height;
                if (typeof size === 'number') {
                    height = `${size}px`;
                }
                else {
                    height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
                }
                return {
                    '--font-size': fontSize,
                    '--border-radius': round || circle ? '50%' : borderRadius,
                    '--color': color,
                    '--bezier': cubicBezierEaseInOut,
                    '--size': height
                };
            })
        };
    },
    render() {
        const { $slots, src, mergedClsPrefix } = this;
        return ((0, vue_1.h)("span", { ref: "selfRef", class: `${mergedClsPrefix}-avatar`, style: this.cssVars }, !$slots.default && src ? ((0, vue_1.h)("img", { src: src, onError: this.onError, style: { objectFit: this.objectFit } })) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
            default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
        }))));
    }
});
