import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { formatDate } from "../utils";
import { CheckCircle2, Edit, MessageSquare, MoreHorizontal, Reply, Sparkles, } from "lucide-react";
import { DeleteIcon } from "../../components/ui/delete-icon";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { getFeedbackAuthorName, getFeedbackAvatarClassName, } from "./feedbackAvatar";
import { Avatar } from "../../components/ui/avatar";
import { useResolvedUser } from "../services/userResolution";
import { MentionText } from "./MentionText";
export function CommentView({ comment, canEdit, canDelete, canResolve, availableTags = [], basePageId, basePageName, parentSnippet, resolvedAuthorName, onEdit, onDelete, onResolve, onUnresolve, onAiAction, onReply, hideActions = false, showCommentIcon = true, showContextInfo = true, compact = false, }) {
    const authorName = getFeedbackAuthorName(comment, resolvedAuthorName);
    const resolvedAuthor = useResolvedUser(comment.author, {
        fullName: comment.authorDisplayName,
    });
    const renderTags = () => {
        const tagLabels = comment.tags
            ? comment.tags.split(",").filter((t) => t.trim())
            : [];
        if (tagLabels.length === 0)
            return null;
        const colorMap = new Map(availableTags.map((t) => [t.label, t.color]));
        return (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tagLabels.map((label) => {
                const color = colorMap.get(label);
                return (_jsx("span", { className: "text-2xs badge-pad-sm rounded border", style: {
                        borderColor: color || undefined,
                        backgroundColor: color ? color + "22" : undefined,
                    }, children: label }, label));
            }) }));
    };
    const renderContextInfo = () => {
        if (comment.parentCommentId)
            return null;
        const pageName = basePageName;
        const isComponentDifferent = !!comment.itemId && comment.mainItemId !== comment.itemId;
        const componentName = isComponentDifferent ? comment.itemName : undefined;
        const fieldName = comment.fieldName;
        const hasPageName = !!pageName && pageName.length > 0;
        const hasComponentName = !!componentName && componentName.length > 0;
        const hasFieldName = !!fieldName && fieldName.length > 0;
        if (!hasPageName && !hasComponentName && !hasFieldName)
            return null;
        return (_jsxs("div", { className: `${compact ? "mt-2" : "mt-3"} flex items-center border-t pt-${compact ? "2" : "3"} text-xs`, "data-testid": "comment-context-info", children: [hasPageName && (_jsx("div", { className: "text-2xs text-neutral-grey-50", "data-testid": "comment-page-name", children: pageName })), hasPageName && (hasComponentName || hasFieldName) && (_jsx("div", { className: "text-2xs text-neutral-grey-50 mx-2", children: ">" })), hasComponentName && (_jsx("div", { className: "text-2xs text-neutral-grey-50", "data-testid": "comment-component-name", children: componentName })), hasComponentName && hasFieldName && (_jsx("div", { className: "text-2xs text-neutral-grey-50 mx-2", children: ">" })), hasFieldName && (_jsx("div", { className: "text-2xs text-neutral-grey-50", "data-testid": "comment-field-name", children: fieldName }))] }));
    };
    const hasActions = canEdit ||
        canDelete ||
        (canResolve && !comment.isResolved && !!onResolve) ||
        (canResolve && comment.isResolved && !!onUnresolve) ||
        (canResolve && !comment.isResolved && !!onAiAction) ||
        (!comment.isResolved && !!onReply);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${compact ? "mb-2" : "mb-3"} flex items-start gap-3`, children: [showCommentIcon && (_jsx(MessageSquare, { className: "text-feedback-blue mt-1 h-4 w-4 shrink-0" })), _jsx(Avatar, { src: resolvedAuthor.avatarUrl, name: authorName, size: "sm", fallbackClassName: getFeedbackAvatarClassName(comment), className: "text-[11px] font-semibold", title: comment.author }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: `flex min-w-0 ${compact
                                ? "min-h-7 items-center gap-2"
                                : "flex-col justify-center gap-0.5"}`, children: [_jsx("span", { className: "text-neutral-grey-100 truncate text-sm leading-5 font-semibold", title: comment.author, children: authorName }), _jsx("span", { className: "text-neutral-grey-50 shrink-0 text-xs leading-4", children: comment.created ? formatDate(new Date(comment.created)) : "" })] }) }), !hideActions && hasActions && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 -mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full", "aria-label": "Comment actions", onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 2 }) }) }), _jsxs(PopoverContent, { className: "w-44 p-1", align: "end", children: [canEdit && onEdit && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-edit", onClick: (e) => {
                                            e.stopPropagation();
                                            onEdit();
                                        }, children: [_jsx(Edit, { className: "h-4 w-4", strokeWidth: 1.5 }), "Edit"] })), canDelete && onDelete && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-delete", onClick: (e) => {
                                            e.stopPropagation();
                                            onDelete();
                                        }, children: [_jsx(DeleteIcon, { size: "lg" }), "Delete"] })), canResolve && !comment.isResolved && onResolve && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-resolve", onClick: (e) => {
                                            e.stopPropagation();
                                            onResolve();
                                        }, children: [_jsx(CheckCircle2, { className: "h-4 w-4", strokeWidth: 1.5 }), "Resolve"] })), canResolve && comment.isResolved && onUnresolve && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-resolved-indicator", title: comment.resolvedBy && comment.resolvedDate
                                            ? `Resolved by ${comment.resolvedBy} (${formatDate(new Date(comment.resolvedDate))})`
                                            : undefined, onClick: (e) => {
                                            e.stopPropagation();
                                            onUnresolve();
                                        }, children: [_jsx(CheckCircle2, { className: "h-4 w-4", strokeWidth: 1.5 }), "Unresolve"] })), canResolve && !comment.isResolved && onAiAction && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-ai", onClick: (e) => {
                                            e.stopPropagation();
                                            onAiAction();
                                        }, children: [_jsx(Sparkles, { className: "h-4 w-4", strokeWidth: 1.5 }), "AI"] })), !comment.isResolved && onReply && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-reply", onClick: (e) => {
                                            e.stopPropagation();
                                            onReply();
                                        }, children: [_jsx(Reply, { className: "h-4 w-4", strokeWidth: 1.5 }), "Reply"] }))] })] }))] }), parentSnippet && (_jsxs("div", { className: "text-2xs text-neutral-grey-50 mb-1 pl-10 [overflow-wrap:anywhere] break-words", children: ["\u201C", parentSnippet, "..\u201D"] })), _jsx("div", { className: `${compact ? "pl-10 text-sm" : "pl-10 text-sm"} text-neutral-grey-100 leading-6 [overflow-wrap:anywhere] break-words whitespace-pre-wrap`, "data-testid": "comment-text", children: _jsx(MentionText, { text: comment.text }) }), renderTags(), showContextInfo && renderContextInfo(), comment.isResolved && (_jsxs("div", { className: `${compact ? "mt-2" : "mt-3"} text-feedback-green text-xs font-medium`, children: ["\u2713 Resolved by ", comment.resolvedBy, " on", " ", formatDate(new Date(comment.resolvedDate))] }))] }));
}
//# sourceMappingURL=CommentView.js.map