"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RepliedComment = void 0;
var react_1 = __importStar(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var classnames_1 = __importDefault(require("classnames"));
var Box_1 = __importDefault(require("@mui/material/Box"));
var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
var CollaborationContext_1 = require("../../../contexts/CollaborationContext");
var useAutoFocus_1 = require("../../../hooks/useAutoFocus");
var DropDownMenuButton_1 = require("../../../DropDownMenuButton");
var SmallIconButton_1 = require("../../../SmallIconButton");
var helpers_1 = require("../../helpers");
var Avatar_1 = require("../Avatar");
var CommentContent_1 = require("../CommentContent");
var SendMessageArea_1 = require("../SendMessageArea");
var styles_1 = require("./styles");
var RepliedComment = function (_a) {
    var className = _a.className, reply = _a.reply, uri = _a.uri, comment = _a.comment, popperRef = _a.popperRef;
    var inputRef = (0, react_1.useRef)();
    var username = (0, MdmModuleContext_1.useMdmUsername)();
    var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
    var canChangeReply = createdBy === username && comment.status !== 'resolved';
    var _b = (0, react_1.useContext)(CollaborationContext_1.CollaborationContext), deleteReply = _b.deleteReply, updateCommentState = _b.updateCommentState, getCommentState = _b.getCommentState;
    var commentUri = (0, helpers_1.createEditedReplyUri)(comment, reply);
    var isEditing = getCommentState(uri, commentUri).isEditing;
    var updateIsEditingReply = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
    (0, useAutoFocus_1.useAutoFocus)(inputRef, isEditing);
    var styles = (0, styles_1.useStyles)();
    var menuItems = (0, react_1.useMemo)(function () { return [
        {
            text: ui_i18n_1.default.text('Edit'),
            onClick: function () { return updateIsEditingReply(true); }
        },
        {
            text: ui_i18n_1.default.text('Delete'),
            onClick: function () { return deleteReply({ uri: uri, commentId: comment.commentId, reply: reply }); }
        }
    ]; }, [deleteReply, uri, comment.commentId, reply, updateIsEditingReply]);
    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return updateIsEditingReply(false); }, isEditingReply: isEditing, reply: reply, comment: comment }));
    return (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(styles.root, className) },
        react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
        react_1.default.createElement(Box_1.default, { className: styles.replyArea },
            react_1.default.createElement(Box_1.default, { className: styles.header },
                react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy),
                action === 'resolve' && (react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Marked as resolved'))),
                action === 'reopen' && react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Re-opened'))),
            action !== 'resolve' &&
                (isEditing ? sendMessageArea : react_1.default.createElement(CommentContent_1.CommentContent, { className: styles.message, comment: reply })),
            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, (0, helpers_1.formatDate)(createdTime))),
        canChangeReply && (react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                icon: MoreVert_1.default,
                tooltipTitle: ui_i18n_1.default.text('Open menu')
            }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))));
};
exports.RepliedComment = RepliedComment;
