import React, { useContext, useRef, useState } from 'react';
import i18n from 'ui-i18n';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import DoneIcon from '@mui/icons-material/Done';
import { PopupWithArrow } from '../../../PopupWithArrow';
import { CollaborationContext } from '../../../contexts/CollaborationContext';
import { CollaborationItem } from '../../../CollaborationItem';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
import { useStyles } from './styles';
export var CollaborationPopup = function (_a) {
    var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, anchorEl = _a.anchorEl, onClose = _a.onClose, open = _a.open, comment = _a.comment;
    var _b = useState(0), scrollWidth = _b[0], setScrollWidth = _b[1];
    var hasScroll = scrollWidth !== 0;
    var styles = useStyles({ scrollWidth: scrollWidth, hasScroll: hasScroll });
    var popperRef = useRef(null);
    var _c = useContext(CollaborationContext), resolveThread = _c.resolveThread, loading = _c.loading, sending = _c.sending;
    var itemsCount = 1 + (comment === null || comment === void 0 ? void 0 : comment.replies.length);
    var handleResolve = function () {
        resolveThread({ commentId: comment.commentId, uri: uri });
    };
    return (React.createElement(PopupWithArrow, { popperRef: popperRef, anchorEl: anchorEl, open: open, placement: "right-start", onClose: onClose, className: styles.popper },
        React.createElement(Box, { className: styles.header },
            React.createElement(Box, { className: styles.headerInfo },
                React.createElement(Typography, { className: styles.title }, i18n.text('Comments')),
                comment && !loading && (React.createElement(Typography, { className: styles.counter },
                    i18n.number(itemsCount),
                    " ",
                    itemsCount === 1 ? i18n.text('item') : i18n.text('items')))),
            comment && !loading && (React.createElement(SmallIconButtonWithTooltip, { className: styles.resolveButton, size: "S", onClick: handleResolve, disabled: sending, showForDisabled: true, tooltipTitle: i18n.text('Resolve'), icon: DoneIcon, color: "primary" }))),
        !loading && (React.createElement(CollaborationItem, { popperRef: popperRef, messagesRef: function (node) {
                if (node) {
                    setScrollWidth(node.offsetWidth - node.clientWidth);
                }
            }, classes: {
                root: styles.collaborationItem,
                replies: styles.replies,
                sendMessageArea: styles.sendMessageArea,
                messages: styles.messages,
                comment: styles.comment
            }, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }))));
};
