"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisplayAvatar = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
/*
Show an avatar for a given user account.
*/
var antd_1 = require("antd");
var font_color_1 = require("@cocalc/frontend/account/avatar/font-color");
var A_1 = __importDefault(require("components/misc/A"));
var profile_1 = __importDefault(require("lib/hooks/profile"));
var use_customize_1 = __importDefault(require("lib/use-customize"));
function Avatar(_a) {
    var _b, _c;
    var account_id = _a.account_id, size = _a.size, style = _a.style, showName = _a.showName, extra = _a.extra, zIndex = _a.zIndex;
    var account = (0, use_customize_1.default)().account;
    if (size == null) {
        // Default size=40 to match the cocalc logo.
        size = 40;
    }
    var profile = (0, profile_1.default)({ account_id: 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, __assign({ mouseLeaveDelay: 0.3, zIndex: zIndex, title: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { textAlign: "center", fontSize: "13pt" } }, { children: [profile.first_name, " ", profile.last_name, " ", profile.name ? "(@".concat(profile.name, ")") : "", account_id == (account === null || account === void 0 ? void 0 : account.account_id) && ((0, jsx_runtime_1.jsx)(A_1.default, __assign({ href: "/config/account/name", style: {
                        fontSize: "11px",
                        marginLeft: "10px",
                        float: "right",
                    } }, { children: "edit" })))] })), content: (0, jsx_runtime_1.jsxs)("div", __assign({ 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: (_b = profile.first_name) === null || _b === void 0 ? void 0 : _b[0] })), account_id == (account === null || account === void 0 ? void 0 : account.account_id) && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginTop: "10px" } }, { children: (0, jsx_runtime_1.jsx)(A_1.default, __assign({ href: "/config/account/avatar", style: {
                            fontSize: "11px",
                        } }, { children: "edit" })) }))), extra] })) }, { children: (0, jsx_runtime_1.jsxs)("span", __assign({ 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: (_c = profile.first_name) === null || _c === void 0 ? void 0 : _c[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(_a) {
    var style = _a.style, size = _a.size, image = _a.image, color = _a.color, letter = _a.letter;
    if (!image && !color && !letter) {
        return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: __assign({ verticalAlign: "middle" }, style), size: size }));
    }
    if (image) {
        return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: __assign({ verticalAlign: "middle" }, style), size: size, src: (0, jsx_runtime_1.jsx)("img", { src: image }) }));
    }
    var fontSize = undefined;
    if (size != null) {
        if (size >= 32) {
            fontSize = "".concat(0.75 * size, "px");
        }
        else if (size >= 24) {
            fontSize = "16pt";
        }
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Avatar, __assign({ style: __assign({ backgroundColor: color, verticalAlign: "middle", fontSize: fontSize, color: (0, font_color_1.avatar_fontcolor)(color) }, style), size: size }, { children: letter ? letter : "?" })));
}
exports.DisplayAvatar = DisplayAvatar;
//# sourceMappingURL=avatar.js.map