import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { formatDate } from "../utils";
import { SimpleIconButton } from "../ui/SimpleIconButton";
import { Check, Edit, Reply, Sparkles, Trash2 } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
export function CommentView({ comment, canEdit, canDelete, canResolve, availableTags = [], basePageId, basePageName, parentSnippet, onEdit, onDelete, onResolve, onUnresolve, onAiAction, onReply, hideActions = false, compact = false, }) {
    const [deletePopoverOpen, setDeletePopoverOpen] = React.useState(false);
    const [resolvePopoverOpen, setResolvePopoverOpen] = React.useState(false);
    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 rounded border px-2 py-0.5", 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-gray-500", "data-testid": "comment-page-name", children: pageName })), hasPageName && (hasComponentName || hasFieldName) && (_jsx("div", { className: "text-2xs mx-2 text-gray-500", children: ">" })), hasComponentName && (_jsx("div", { className: "text-2xs text-gray-500", "data-testid": "comment-component-name", children: componentName })), hasComponentName && hasFieldName && (_jsx("div", { className: "text-2xs mx-2 text-gray-500", children: ">" })), hasFieldName && (_jsx("div", { className: "text-2xs text-gray-500", "data-testid": "comment-field-name", children: fieldName }))] }));
    };
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${compact ? "mb-2" : "mb-3"} flex items-start justify-between`, children: [_jsxs("div", { children: [_jsx("div", { className: `text-dark text-xs font-medium`, title: comment.author, children: comment.authorDisplayName }), _jsx("div", { className: "text-xs text-gray-500", children: comment.created ? formatDate(new Date(comment.created)) : "" })] }), !hideActions && (_jsxs("div", { className: "flex items-center gap-1", children: [canEdit && onEdit && (_jsx(SimpleIconButton, { icon: _jsx(Edit, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "Edit", "data-testid": "comment-action-edit", onClick: (e) => {
                                    e.stopPropagation();
                                    onEdit();
                                } })), canDelete && onDelete && (_jsxs(Popover, { open: deletePopoverOpen, onOpenChange: setDeletePopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "hover:bg-gray-5 cursor-pointer rounded-full p-[6px]", title: "Delete", "data-testid": "comment-action-delete", onClick: (e) => {
                                                e.stopPropagation();
                                            }, children: _jsx(Trash2, { className: "h-3.5 w-3.5", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-auto p-2", align: "end", "data-testid": "comment-delete-popover", children: _jsx(Button, { variant: "outline", size: "sm", onClick: async (e) => {
                                                e.stopPropagation();
                                                setDeletePopoverOpen(false);
                                                onDelete();
                                            }, children: "Delete" }) })] })), canResolve && !comment.isResolved && onResolve && (_jsx(SimpleIconButton, { icon: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "Resolve", "data-testid": "comment-action-resolve", onClick: (e) => {
                                    e.stopPropagation();
                                    onResolve();
                                } })), comment.isResolved && onUnresolve && (_jsxs(Popover, { open: resolvePopoverOpen, onOpenChange: setResolvePopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "cursor-pointer rounded-full p-[6px]", title: "Resolved by " +
                                                comment.resolvedBy +
                                                " (" +
                                                formatDate(new Date(comment.resolvedDate)) +
                                                ")", "data-testid": "comment-resolved-indicator", onClick: (e) => {
                                                e.stopPropagation();
                                                setResolvePopoverOpen(true);
                                            }, children: _jsx(Check, { className: "h-3.5 w-3.5 text-green-500", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-auto p-2", align: "end", children: _jsx(Button, { variant: "outline", size: "sm", onClick: async () => {
                                                setResolvePopoverOpen(false);
                                                onUnresolve();
                                            }, children: "Unresolve" }) })] })), canResolve && !comment.isResolved && onAiAction && (_jsx(SimpleIconButton, { icon: _jsx(Sparkles, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "AI", "data-testid": "comment-action-ai", onClick: (e) => {
                                    e.stopPropagation();
                                    onAiAction();
                                } })), canResolve && !comment.isResolved && onReply && (_jsx(SimpleIconButton, { icon: _jsx(Reply, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "Reply", "data-testid": "comment-action-reply", onClick: (e) => {
                                    e.stopPropagation();
                                    onReply();
                                } }))] }))] }), parentSnippet && (_jsxs("div", { className: "mb-1 text-2xs text-gray-500", children: ["\u201C", parentSnippet, "..\u201D"] })), _jsx("div", { className: `${compact ? "text-sm" : "text-sm"} whitespace-pre-wrap text-gray-700`, "data-testid": "comment-text", children: comment.text }), renderTags(), renderContextInfo(), comment.isResolved && (_jsxs("div", { className: `${compact ? "mt-2" : "mt-3"} text-xs font-medium text-green-600`, children: ["\u2713 Resolved by ", comment.resolvedBy, " on", " ", formatDate(new Date(comment.resolvedDate))] }))] }));
}
//# sourceMappingURL=CommentView.js.map