"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const UserInfo_1 = tslib_1.__importStar(require("../UserInfo"));
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const constants_1 = require("../UserInfo/constants");
const classes = {
    root: `${constants_1.PREFIX}-dialog-root`,
    caption: `${constants_1.PREFIX}-caption`,
    avatar: `${constants_1.PREFIX}-avatar`,
    username: `${constants_1.PREFIX}-username`
};
const Root = (0, material_1.styled)(BaseDialog_1.default, {
    name: constants_1.PREFIX,
    slot: 'DialogRoot'
})(() => ({}));
function UserInfoDialog(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className, userId = null, user = null, UserInfoProps = {} } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "UserInfoProps"]);
    // HOOKS
    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
    // RENDER
    const subtitle = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.caption }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scUser === null || scUser === void 0 ? void 0 : scUser.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.username, variant: "h6" }, { children: (scUser === null || scUser === void 0 ? void 0 : scUser.real_name) ? scUser === null || scUser === void 0 ? void 0 : scUser.real_name : scUser === null || scUser === void 0 ? void 0 : scUser.username }))] })));
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userInfoDialog.title", defaultMessage: "ui.userInfoDialog.title" }), subtitle: subtitle, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scUser ? (0, jsx_runtime_1.jsx)(UserInfo_1.default, Object.assign({}, UserInfoProps, { userId: userId, user: scUser })) : (0, jsx_runtime_1.jsx)(UserInfo_1.UserInfoSkeleton, {}) })));
}
exports.default = UserInfoDialog;
