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