"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.Comment = void 0;
var react_1 = __importStar(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var Link_1 = __importDefault(require("@mui/material/Link"));
var Box_1 = __importDefault(require("@mui/material/Box"));
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
var DropDownMenuButton_1 = require("../../../DropDownMenuButton");
var SmallIconButton_1 = require("../../../SmallIconButton");
var CollaborationContext_1 = require("../../../contexts/CollaborationContext");
var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
var useAutoFocus_1 = require("../../../hooks/useAutoFocus");
var helpers_1 = require("../../helpers");
var CommentTarget_1 = require("../CommentTarget");
var CommentContent_1 = require("../CommentContent");
var Avatar_1 = require("../Avatar");
var SendMessageArea_1 = require("../SendMessageArea");
var styles_1 = require("./styles");
var Comment = function (_a) {
    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType;
    var styles = (0, styles_1.useStyles)();
    var inputRef = (0, react_1.useRef)();
    var username = (0, MdmModuleContext_1.useMdmUsername)();
    var commentId = comment.commentId, createdBy = comment.createdBy, createdTime = comment.createdTime, status = comment.status;
    var isResolved = status === 'resolved';
    var canChangeComment = createdBy === username;
    var _b = (0, react_1.useContext)(CollaborationContext_1.CollaborationContext), resolveThread = _b.resolveThread, reOpenThread = _b.reOpenThread, sending = _b.sending, deleteComment = _b.deleteComment, updateCommentState = _b.updateCommentState, getCommentState = _b.getCommentState;
    var commentUri = (0, helpers_1.createEditedCommentUri)(comment);
    var isEditing = getCommentState(uri, commentUri).isEditing;
    var updateIsEditingComment = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
    (0, useAutoFocus_1.useAutoFocus)(inputRef, isEditing);
    var menuItems = (0, react_1.useMemo)(function () {
        return isResolved
            ? [
                {
                    text: ui_i18n_1.default.text('Delete'),
                    onClick: function () { return deleteComment({ uri: uri, commentId: commentId }); }
                }
            ]
            : [
                {
                    text: ui_i18n_1.default.text('Edit'),
                    onClick: function () { return updateIsEditingComment(true); }
                },
                {
                    text: ui_i18n_1.default.text('Delete'),
                    onClick: function () { return deleteComment({ uri: uri, commentId: commentId }); }
                }
            ];
    }, [commentId, deleteComment, isResolved, updateIsEditingComment, uri]);
    var handleResolve = function () {
        resolveThread({ commentId: commentId, uri: uri });
    };
    var handleReOpen = function () {
        reOpenThread({ commentId: commentId, uri: uri });
    };
    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { inputRef: inputRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, onCancel: function () { return updateIsEditingComment(false); }, isEditingComment: isEditing, comment: comment }));
    return (react_1.default.createElement(Box_1.default, { className: className },
        react_1.default.createElement(Box_1.default, { className: styles.header },
            react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
            react_1.default.createElement(Box_1.default, { width: "100%" },
                react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy)),
            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, (0, helpers_1.formatDate)(createdTime)),
            canChangeComment && (react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                    icon: MoreVert_1.default,
                    tooltipTitle: ui_i18n_1.default.text('Open menu')
                }, popoverProps: { PopoverClasses: { root: styles.dropdownMenu } }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))),
        react_1.default.createElement(Box_1.default, { className: styles.body },
            react_1.default.createElement(CommentTarget_1.CommentTarget, { comment: comment, className: styles.commentTarget }),
            isEditing ? sendMessageArea : react_1.default.createElement(CommentContent_1.CommentContent, { comment: comment, className: styles.message }),
            react_1.default.createElement(Box_1.default, { className: styles.buttons },
                react_1.default.createElement(Link_1.default, { className: styles.button, onClick: onReply, component: "button", underline: "hover" }, ui_i18n_1.default.text('Reply')),
                !isResolved && (react_1.default.createElement(Link_1.default, { disabled: sending, className: styles.button, onClick: handleResolve, component: "button", underline: "hover" }, ui_i18n_1.default.text('Resolve'))),
                isResolved && (react_1.default.createElement(Link_1.default, { disabled: sending, className: styles.button, onClick: handleReOpen, component: "button", underline: "hover" }, ui_i18n_1.default.text('Re-open')))))));
};
exports.Comment = Comment;
