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';
import { Icon } from '../../../icon/index.js';
const AmountDiff = ({ baseValue, value, viewMode, className, childrenClassName, currencyPosition = 'left', options, symbolPosition, includeCurrencySymbols, diffMode = 'words', }) => {
    const currentValue = useMemo(() => {
        if (typeof value === 'object') {
            return value.value?.toString() ?? '';
        }
        return value?.toString() ?? '';
    }, [value]);
    const currentBaseValue = useMemo(() => {
        if (typeof baseValue === 'object') {
            return baseValue.value?.toString() ?? '';
        }
        return baseValue?.toString() ?? '';
    }, [baseValue]);
    const diffAmount = useMemo(() => {
        return diffMode === 'words'
            ? diffWords(currentBaseValue, currentValue)
            : diffSentences(currentBaseValue, currentValue);
    }, [currentBaseValue, currentValue, diffMode]);
    const currentUnit = useMemo(() => {
        if (typeof value === 'object') {
            return value.unit ?? '';
        }
        return '';
    }, [value]);
    const currentBaseUnit = useMemo(() => {
        if (typeof baseValue === 'object') {
            return baseValue.unit ?? '';
        }
        return '';
    }, [baseValue]);
    const diffUnit = useMemo(() => {
        return diffMode === 'words' ? diffWords(currentBaseUnit, currentUnit) : diffSentences(currentBaseUnit, currentUnit);
    }, [currentBaseUnit, currentUnit, diffMode]);
    // 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('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('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 for a specific diff
    const renderDiffContent = (diff) => {
        return diff.map(renderDiffPart).filter(Boolean);
    };
    const amountContent = renderDiffContent(diffAmount);
    const unitContent = renderDiffContent(diffUnit);
    const showUnit = typeof value === 'object' && 'unit' in value;
    const symbolClassName = unitContent.length > 0 ? unitContent[0].props?.className : undefined;
    const actualSymbol = viewMode === 'addition' ? currentUnit : currentBaseUnit;
    const symbol = useMemo(() => {
        return options?.find((option) => option.ticker === actualSymbol)?.symbol;
    }, [options, actualSymbol]);
    const showSymbolLeft = includeCurrencySymbols && symbolPosition === 'left';
    const showSymbolRight = includeCurrencySymbols && symbolPosition === 'right';
    return (_jsxs("div", { className: cn('flex w-full items-center gap-2', className), children: [showUnit && currencyPosition === 'left' && (_jsx("div", { className: "flex flex-row items-center justify-end shrink-0", children: _jsxs("div", { className: "flex flex-row items-center justify-end gap-2", children: [_jsxs("span", { children: [showSymbolLeft && _jsx("span", { className: cn(symbolClassName, 'pr-1'), children: symbol }), unitContent, showSymbolRight && _jsx("span", { className: cn(symbolClassName, 'pl-1'), children: symbol })] }), _jsx(Icon, { size: 16, name: "ChevronDown", className: "text-gray-700 dark:text-gray-300" }), _jsx("div", { className: "h-[36px] w-px bg-gray-300" })] }) })), _jsx("div", { className: "flex flex-1 truncate [&>span]:w-full [&>span]:truncate", children: amountContent }), showUnit && currencyPosition === 'right' && (_jsx("div", { className: "flex flex-row items-center justify-end shrink-0", children: _jsxs("div", { className: "flex flex-row items-center justify-end gap-2", children: [_jsx("div", { className: "h-[36px] w-px bg-gray-300" }), _jsxs("span", { children: [showSymbolLeft && _jsx("span", { className: cn(symbolClassName, 'pr-1'), children: symbol }), unitContent, showSymbolRight && _jsx("span", { className: cn(symbolClassName, 'pl-1'), children: symbol })] }), _jsx(Icon, { size: 16, name: "ChevronDown", className: "text-gray-700 dark:text-gray-300" })] }) }))] }));
};
AmountDiff.displayName = 'AmountDiff';
export { AmountDiff };
//# sourceMappingURL=fake-amount-diff.js.map