import React, { useRef, useContext, useMemo, useCallback } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import Box from '@mui/material/Box';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Typography from '@mui/material/Typography';
import { useMdmUsername } from '../../../contexts/MdmModuleContext';
import { CollaborationContext } from '../../../contexts/CollaborationContext';
import { useAutoFocus } from '../../../hooks/useAutoFocus';
import { DropDownMenuButton } from '../../../DropDownMenuButton';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
import { createEditedReplyUri, formatDate } from '../../helpers';
import { Avatar } from '../Avatar';
import { CommentContent } from '../CommentContent';
import { SendMessageArea } from '../SendMessageArea';
import { useStyles } from './styles';
export var RepliedComment = function (_a) {
    var className = _a.className, reply = _a.reply, uri = _a.uri, comment = _a.comment, popperRef = _a.popperRef;
    var inputRef = useRef();
    var username = useMdmUsername();
    var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
    var canChangeReply = createdBy === username && comment.status !== 'resolved';
    var _b = useContext(CollaborationContext), deleteReply = _b.deleteReply, updateCommentState = _b.updateCommentState, getCommentState = _b.getCommentState;
    var commentUri = createEditedReplyUri(comment, reply);
    var isEditing = getCommentState(uri, commentUri).isEditing;
    var updateIsEditingReply = useCallback(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
    useAutoFocus(inputRef, isEditing);
    var styles = useStyles();
    var menuItems = useMemo(function () { return [
        {
            text: i18n.text('Edit'),
            onClick: function () { return updateIsEditingReply(true); }
        },
        {
            text: i18n.text('Delete'),
            onClick: function () { return deleteReply({ uri: uri, commentId: comment.commentId, reply: reply }); }
        }
    ]; }, [deleteReply, uri, comment.commentId, reply, updateIsEditingReply]);
    var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return updateIsEditingReply(false); }, isEditingReply: isEditing, reply: reply, comment: comment }));
    return (React.createElement(Box, { className: classnames(styles.root, className) },
        React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
        React.createElement(Box, { className: styles.replyArea },
            React.createElement(Box, { className: styles.header },
                React.createElement(Typography, { className: styles.username }, createdBy),
                action === 'resolve' && (React.createElement(Typography, { className: styles.marked }, i18n.text('Marked as resolved'))),
                action === 'reopen' && React.createElement(Typography, { className: styles.marked }, i18n.text('Re-opened'))),
            action !== 'resolve' &&
                (isEditing ? sendMessageArea : React.createElement(CommentContent, { className: styles.message, comment: reply })),
            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime))),
        canChangeReply && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
                icon: MoreVertIcon,
                tooltipTitle: i18n.text('Open menu')
            }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))));
};
