import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Button } from "../../components/ui/button";
import { MentionTextarea } from "../../components/ui/mention-textarea";
import { ArrowUp, X } from "lucide-react";
export function CommentEditor({ initialText = "", onSave, onCancel, isSaving = false, availableTags = [], selectedTags: initialSelectedTags = [], placeholder = "Write your comment...", autoFocus = true, submitLabel = "Save", cancelLabel = "Cancel", showTagSelector = true, compact = false, showCancelButton = true, clearOnSave = false, onKeyDown, }) {
    const [text, setText] = React.useState(initialText);
    const [selectedTags, setSelectedTags] = React.useState(initialSelectedTags);
    const textareaRef = React.useRef(null);
    React.useEffect(() => {
        if (autoFocus && textareaRef.current) {
            // Focus after a longer delay to ensure the component is fully mounted, especially for dynamically created popovers
            const timer = setTimeout(() => {
                textareaRef.current?.focus();
                // Move cursor to end
                const len = textareaRef.current?.value.length || 0;
                textareaRef.current?.setSelectionRange(len, len);
            }, 200);
            return () => clearTimeout(timer);
        }
    }, [autoFocus]);
    const handleKeyDown = (e) => {
        // Call custom handler first if provided
        if (onKeyDown) {
            onKeyDown(e);
        }
        // Default behavior: Enter to submit (unless Shift is held)
        if (e.key === "Enter" && !e.shiftKey && !e.defaultPrevented) {
            e.preventDefault();
            handleSave();
        }
        // Escape to cancel
        else if (e.key === "Escape" && !e.defaultPrevented) {
            e.preventDefault();
            onCancel();
        }
    };
    const handleSave = async () => {
        const trimmedText = text.trim();
        if (trimmedText && !isSaving) {
            await onSave(trimmedText, selectedTags);
            if (clearOnSave) {
                setText("");
                setSelectedTags([]);
            }
        }
    };
    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "border-border-default focus-within:border-border-default flex min-h-[64px] overflow-hidden rounded-xl border bg-white p-1", children: _jsxs("div", { className: "bg-neutral-grey-5 flex flex-1 items-center overflow-hidden rounded-lg", children: [_jsx(MentionTextarea, { ref: textareaRef, "data-testid": "add-comment-textarea", value: text, onValueChange: setText, onKeyDown: handleKeyDown, placeholder: placeholder, className: `text-neutral-grey-100 placeholder:text-neutral-grey-50 flex-1 resize-none appearance-none !rounded-none !border-0 !bg-transparent px-3 py-3 text-xs leading-5 !shadow-none !outline-none focus:!border-0 focus:!shadow-none focus:!ring-0 focus:!outline-none focus-visible:!border-0 focus-visible:!shadow-none focus-visible:!ring-0 focus-visible:!outline-none ${compact ? "h-[58px]" : "min-h-[88px]"}`, style: {
                                backgroundColor: "transparent",
                                border: "none",
                                boxShadow: "none",
                                outline: "none",
                            }, rows: compact ? 2 : 3, disabled: isSaving, autoFocus: autoFocus }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 self-stretch pr-1", children: [showCancelButton && (_jsx("button", { type: "button", onClick: onCancel, disabled: isSaving, className: "bg-neutral-grey-5 text-neutral-grey-100 hover:bg-neutral-grey-10 disabled:text-neutral-grey-50 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md transition-colors", "data-testid": "add-comment-cancel", "aria-label": cancelLabel, title: cancelLabel, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 2.5 }) })), _jsx("button", { type: "button", onClick: handleSave, disabled: !text.trim() || isSaving, className: "bg-highlight-100 hover:bg-highlight-100/90 focus-visible:ring-highlight-100/30 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md text-white shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-default disabled:bg-neutral-grey-5 disabled:text-neutral-grey-50 disabled:shadow-none disabled:hover:bg-neutral-grey-5", "data-testid": "add-comment-submit", "aria-label": isSaving ? "Saving comment" : submitLabel, title: isSaving ? "Saving..." : submitLabel, children: _jsx(ArrowUp, { className: "h-4 w-4", strokeWidth: 2.5 }) })] })] }) }), showTagSelector && availableTags.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Tags" }), _jsx("div", { className: "flex flex-wrap gap-2", children: availableTags.map((tag) => {
                            const isSelected = selectedTags.includes(tag.label);
                            return (_jsx(Button, { type: "button", size: "sm", variant: isSelected ? "secondary" : "outline", className: "h-6 px-2 text-xs", onClick: () => {
                                    setSelectedTags((prev) => prev.includes(tag.label)
                                        ? prev.filter((l) => l !== tag.label)
                                        : [...prev, tag.label]);
                                }, style: {
                                    borderColor: isSelected ? tag.color : undefined,
                                    backgroundColor: isSelected ? tag.color + "22" : undefined,
                                }, disabled: isSaving, children: tag.label }, tag.label));
                        }) })] })), !compact && (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Press Enter to submit, Shift+Enter for new line, Escape to cancel" }))] }));
}
//# sourceMappingURL=CommentEditor.js.map