import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CircleFlag } from 'react-circle-flags';
import { cn } from '../../../scalars/lib/index.js';
import { formatPhoneNumber, parsePhoneValue } from '../../../ui/components/data-entry/phone-number-input/utils.js';
import { getJustifyAlignmentClasses } from './utils.js';
const getPhoneNumberInfo = (phone) => {
    if (phone === '')
        return { formattedPhone: '', countryCode: '' };
    const parsedValue = parsePhoneValue(phone);
    if (parsedValue) {
        const selectValueParts = parsedValue.selectValue.split('-');
        const callingCode = selectValueParts[0];
        const countryCode = selectValueParts[1];
        const formattedValue = formatPhoneNumber(callingCode, parsedValue.inputValue);
        return {
            formattedPhone: formattedValue,
            countryCode: countryCode.toLowerCase(),
        };
    }
    return { formattedPhone: phone, countryCode: '' };
};
const renderPhoneCell = (value, context) => {
    const phoneValue = typeof value === 'string' ? value : (value?.toString() ?? '');
    const { formattedPhone, countryCode } = getPhoneNumberInfo(phoneValue);
    return (_jsxs("div", { className: cn('flex items-center gap-2', getJustifyAlignmentClasses(context)), children: [countryCode !== '' && _jsx(CircleFlag, { countryCode: countryCode, height: 16, className: "size-4 flex-shrink-0" }), _jsx("span", { children: formattedPhone })] }));
};
export { renderPhoneCell };
//# sourceMappingURL=phone-render.js.map