import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { diffWords, diffChars } from "diff";
function stripHtml(html) {
    const temp = document.createElement("div");
    temp.innerHTML = html;
    return temp.textContent || temp.innerText || "";
}
/**
 * Clips a long string by preserving the first and last `contextChars` characters,
 * inserting an ellipsis in between.
 */
function clipPartValue(value, contextChars) {
    const prefix = value.substring(0, contextChars);
    const suffix = value.substring(value.length - contextChars);
    return `${prefix}…${suffix}`;
}
export const DiffView = ({ oldText, newText, useWordDiff = false, ignoreFormatting = false, clipUnchanged = false, clipThreshold = 50, clipContext = 10, }) => {
    // Normalize text if styling should be ignored.
    const normalizedOldText = ignoreFormatting ? stripHtml(oldText) : oldText;
    const normalizedNewText = ignoreFormatting ? stripHtml(newText) : newText;
    // Choose diffing algorithm.
    const diff = useWordDiff
        ? diffWords(normalizedOldText, normalizedNewText)
        : diffChars(normalizedOldText, normalizedNewText);
    // Heuristic: if the diff results in just one removed and one added segment,
    // assume a full replacement and show both values in full.
    if (diff.length === 2 &&
        diff[0]?.removed &&
        diff[1]?.added &&
        diff[0]?.value.trim().length > 0 &&
        diff[1]?.value.trim().length > 0) {
        return (_jsxs("div", { className: "flex flex-col gap-4 font-mono text-xs", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-red-400", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-red-400" }), "Removed"] }), _jsx("div", { className: "rounded-md bg-red-50/50 p-2 text-red-700 line-through decoration-red-300/50", children: normalizedOldText })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-green-500", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }), "Added"] }), _jsx("div", { className: "rounded-md bg-green-50/50 p-2 text-green-700", children: normalizedNewText })] })] }));
    }
    return (_jsx("div", { className: "font-mono text-xs leading-relaxed", children: diff.map((part, index) => {
            if (part.added) {
                return (_jsx("span", { className: "bg-green-100/50 text-green-700 px-0.5 rounded-sm", children: part.value }, index));
            }
            if (part.removed) {
                return (_jsx("span", { className: "bg-red-100/50 text-red-700 px-0.5 rounded-sm line-through decoration-red-300/50", children: part.value }, index));
            }
            // For unchanged segments, if clipping is enabled and the segment is too long,
            // show part of it before and after an ellipsis.
            let displayValue = part.value;
            if (clipUnchanged && part.value.length > clipThreshold) {
                displayValue = clipPartValue(part.value, clipContext);
            }
            return (_jsx("span", { className: "text-gray-400", children: displayValue }, index));
        }) }));
};
//# sourceMappingURL=DiffView.js.map