"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisplayAvatar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/*
Show an avatar for a given user account.
*/
const antd_1 = require("antd");
const font_color_1 = require("@cocalc/frontend/account/avatar/font-color");
const A_1 = __importDefault(require("components/misc/A"));
const profile_1 = __importDefault(require("lib/hooks/profile"));
const use_customize_1 = __importDefault(require("lib/use-customize"));
function Avatar({ account_id, size, style, showName, extra, zIndex, }) {
    const { account } = (0, use_customize_1.default)();
    if (size == null) {
        // Default size=40 to match the cocalc logo.
        size = 40;
    }
    const profile = (0, profile_1.default)({ account_id });
    if (!profile) {
        // not loaded yet
        return (0, jsx_runtime_1.jsx)(DisplayAvatar, { style: style, size: size });
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Popover, { mouseLeaveDelay: 0.3, zIndex: zIndex, title: (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: "center", fontSize: "13pt" }, children: [profile.first_name, " ", profile.last_name, " ", profile.name ? `(@${profile.name})` : "", account_id == account?.account_id && ((0, jsx_runtime_1.jsx)(A_1.default, { href: "/config/account/name", style: {
                        fontSize: "11px",
                        marginLeft: "10px",
                        float: "right",
                    }, children: "edit" }))] }), content: (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: "center" }, children: [profile.image ? ((0, jsx_runtime_1.jsx)(DisplayAvatar, { style: style, size: size * 4, image: profile.image })) : ((0, jsx_runtime_1.jsx)(DisplayAvatar, { style: style, size: size * 4, color: profile.color, letter: profile.first_name?.[0] })), account_id == account?.account_id && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: "10px" }, children: (0, jsx_runtime_1.jsx)(A_1.default, { href: "/config/account/avatar", style: {
                            fontSize: "11px",
                        }, children: "edit" }) })), extra] }), children: (0, jsx_runtime_1.jsxs)("span", { style: { cursor: "pointer" }, children: [profile.image ? ((0, jsx_runtime_1.jsx)(DisplayAvatar, { style: style, size: size, image: profile.image })) : ((0, jsx_runtime_1.jsx)(DisplayAvatar, { style: style, size: size, color: profile.color, letter: profile.first_name?.[0] })), showName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), profile.first_name, " ", profile.last_name] }))] }) }));
}
exports.default = Avatar;
function DisplayAvatar({ style, size, image, color, letter, }) {
    if (!image && !color && !letter) {
        return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: {
                verticalAlign: "middle",
                ...style,
            }, size: size }));
    }
    if (image) {
        return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: {
                verticalAlign: "middle",
                ...style,
            }, size: size, src: (0, jsx_runtime_1.jsx)("img", { src: image }) }));
    }
    let fontSize = undefined;
    if (size != null) {
        if (size >= 32) {
            fontSize = `${0.75 * size}px`;
        }
        else if (size >= 24) {
            fontSize = "16pt";
        }
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: {
            backgroundColor: color,
            verticalAlign: "middle",
            fontSize,
            color: (0, font_color_1.avatar_fontcolor)(color),
            ...style,
        }, size: size, children: letter ? letter : "?" }));
}
exports.DisplayAvatar = DisplayAvatar;
//# sourceMappingURL=avatar.js.map