import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import parsePhoneNumber from 'libphonenumber-js';
import { CircleFlag } from 'react-circle-flags';
import { cn } from '../../../../../scalars/lib/index.js';
import { diffSentences } from 'diff';
const renderFlagIcon = (countryCode) => {
    return _jsx(CircleFlag, { className: "size-4", countryCode: countryCode.toLowerCase(), height: 16 });
};
const parsePhoneValue = (rawValue, options = []) => {
    if (rawValue === '')
        return { selectValue: '', inputValue: '' };
    let inputValueToProcess = rawValue.replace(/\D/g, '');
    const sanitizedValue = inputValueToProcess;
    if (inputValueToProcess.startsWith('00')) {
        inputValueToProcess = inputValueToProcess.substring(2);
    }
    const withPlusValue = `+${inputValueToProcess}`;
    const parsedValue = parsePhoneNumber(withPlusValue, { extract: false });
    if (parsedValue?.isPossible() && parsedValue.country) {
        const expectedValue = `+${parsedValue.countryCallingCode}${parsedValue.nationalNumber}`;
        if (withPlusValue !== expectedValue) {
            return { selectValue: '', inputValue: sanitizedValue };
        }
        const callingCode = `+${parsedValue.countryCallingCode}`;
        const selectValue = `${callingCode}-${parsedValue.country}`;
        if (!options.some((o) => o.value === selectValue)) {
            return { selectValue: '', inputValue: sanitizedValue };
        }
        const inputValue = parsedValue.nationalNumber;
        return { selectValue, inputValue };
    }
    return { selectValue: '', inputValue: sanitizedValue };
};
const PhoneNumberDiff = ({ selectValue, inputValue, viewMode, baseValue, options = [], prefixOptionFormat = 'FlagsAndNumbers', }) => {
    // Parse baseValue to get prefix and number parts
    const baseValueParsed = useMemo(() => parsePhoneValue(baseValue ?? '', options), [baseValue, options]);
    const diffPrefix = useMemo(() => {
        const basePrefix = baseValueParsed.selectValue;
        return diffSentences(basePrefix, selectValue);
    }, [selectValue, baseValueParsed.selectValue]);
    const diffNumber = useMemo(() => {
        const baseNumber = baseValueParsed.inputValue;
        return diffSentences(baseNumber, inputValue);
    }, [inputValue, baseValueParsed.inputValue]);
    // Render individual diff parts
    const renderDiffPart = (part, index) => {
        const key = `${part.value}-${index}`;
        // Handle added content
        if (part.added) {
            if (viewMode === 'addition') {
                return (_jsx("span", { className: cn('bg-green-600/30'), children: part.value }, key));
            }
            return null;
        }
        // Handle removed content
        if (part.removed) {
            if (viewMode === 'removal') {
                return (_jsx("span", { className: cn('bg-red-600/30'), children: part.value }, key));
            }
            return null;
        }
        // Handle unchanged content
        return _jsx("span", { children: part.value }, key);
    };
    // Render all diff parts for a specific diff
    const renderDiffContent = (diff) => {
        return diff.map(renderDiffPart).filter(Boolean);
    };
    const numberContent = renderDiffContent(diffNumber);
    // Get the appropriate option for displaying flag and prefix
    const actualSelectValue = viewMode === 'addition' ? selectValue : baseValueParsed.selectValue;
    const selectedOption = options.find((option) => option.value === actualSelectValue);
    // Get the appropriate diff styling
    const getDiffClassName = (diff) => {
        const hasAdditions = diff.some((part) => part.added);
        const hasRemovals = diff.some((part) => part.removed);
        if (hasAdditions && viewMode === 'addition') {
            return 'bg-green-600/30';
        }
        if (hasRemovals && viewMode === 'removal') {
            return 'bg-red-600/30';
        }
        return '';
    };
    const renderPrefixWithFlag = () => {
        if (!selectedOption)
            return null;
        // Extract country code from selectValue
        const countryCode = actualSelectValue.split('-')[1];
        const callingCode = actualSelectValue.split('-')[0];
        const flagIcon = countryCode !== '' ? renderFlagIcon(countryCode) : null;
        // Determine what to show based on prefixOptionFormat
        let displayContent = null;
        switch (prefixOptionFormat) {
            case 'CodesOnly':
                displayContent = countryCode;
                break;
            case 'FlagsOnly':
                displayContent = flagIcon;
                break;
            case 'FlagsAndCodes':
                displayContent = (_jsxs(_Fragment, { children: [flagIcon, countryCode] }));
                break;
            case 'FlagsAndNumbers':
            default:
                displayContent = (_jsxs(_Fragment, { children: [flagIcon, callingCode] }));
                break;
        }
        return displayContent;
    };
    const prefixWithFlag = renderPrefixWithFlag();
    return (_jsxs("div", { className: cn('flex flex-1 w-full items-center', prefixWithFlag !== null && 'gap-2'), children: [_jsx("div", { className: "flex flex-row items-center justify-start shrink-0 leading-[18px]", children: _jsx("span", { className: cn('flex items-center gap-1', getDiffClassName(diffPrefix)), children: prefixWithFlag }) }), _jsx("div", { className: "flex flex-1 truncate [&>span]:w-full [&>span]:truncate leading-[18px]", children: numberContent })] }));
};
PhoneNumberDiff.displayName = 'PhoneNumberDiff';
export { PhoneNumberDiff };
//# sourceMappingURL=phone-number-diff.js.map