import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../../scalars/lib/utils.js';
import { diffSentences, diffWords } from 'diff';
import { useMemo } from 'react';
export const TextDiff = ({ baseValue, value, viewMode, diffMode = 'words', className, childrenClassName, asLink = false, icon, }) => {
    const diff = useMemo(() => {
        const base = baseValue ?? '';
        return diffMode === 'words' ? diffWords(base, value) : diffSentences(base, value);
    }, [baseValue, value, diffMode]);
    const { hasAdditions, hasRemovals } = useMemo(() => {
        return {
            hasAdditions: diff.some((part) => part.added),
            hasRemovals: diff.some((part) => part.removed),
        };
    }, [diff]);
    // Check if current viewMode has relevant content to show
    const hasRelevantContent = useMemo(() => {
        if (!viewMode)
            return false;
        switch (viewMode) {
            case 'addition':
                return hasAdditions;
            case 'removal':
                return hasRemovals;
            case 'mixed':
            case 'edition':
                return hasAdditions || hasRemovals;
            default:
                return false;
        }
    }, [viewMode, hasAdditions, hasRemovals]);
    // Get background color for sentence-level diffs
    const getSentenceBackgroundColor = () => {
        if (diffMode !== 'sentences' || !hasRelevantContent) {
            return undefined;
        }
        if (!viewMode)
            return undefined;
        switch (viewMode) {
            case 'addition':
                return 'bg-green-600/30';
            case 'removal':
                return 'bg-red-600/30';
            case 'mixed':
            case 'edition':
            default:
                return undefined;
        }
    };
    // Render individual diff parts
    const renderDiffPart = (part, index) => {
        const key = `${part.value}-${index}`;
        // Handle added content
        if (part.added) {
            if (viewMode === 'addition' || viewMode === 'mixed') {
                return (_jsx("span", { className: cn((diffMode === 'words' || viewMode === 'mixed') && 'bg-green-600/30', childrenClassName), children: part.value }, key));
            }
            return null;
        }
        // Handle removed content
        if (part.removed) {
            if (viewMode === 'removal' || viewMode === 'mixed') {
                return (_jsx("span", { className: cn((diffMode === 'words' || viewMode === 'mixed') && 'bg-red-600/30', childrenClassName), children: part.value }, key));
            }
            return null;
        }
        // Handle unchanged content - always render this
        return (_jsx("span", { className: cn(childrenClassName), children: part.value }, key));
    };
    // Render all diff parts
    const renderDiffContent = () => {
        return diff.map(renderDiffPart).filter(Boolean);
    };
    const bgColor = getSentenceBackgroundColor();
    const content = renderDiffContent();
    if (asLink && diffMode === 'sentences') {
        return (_jsxs("div", { className: cn('flex flex-1 items-center gap-2 truncate leading-[18px]', bgColor, className), children: [hasRelevantContent && icon && icon, _jsx("a", { href: viewMode === 'removal' ? baseValue : value, target: "_blank", rel: "noopener noreferrer", className: cn('truncate text-blue-900 hover:underline focus-visible:outline-none'), children: content })] }));
    }
    if (icon && diffMode === 'sentences') {
        return (_jsxs("div", { className: cn('flex flex-1 items-center gap-2 truncate [&>span]:truncate leading-[18px]', bgColor, className), children: [hasRelevantContent && icon, content] }));
    }
    return _jsx("span", { className: cn('leading-[18px] text-gray-700', bgColor, className), children: content });
};
//# sourceMappingURL=text-diff.js.map