import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../utils/cn.js';
import { format_currency } from '../../../utils/financial_format.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function CurrencyField(props) {
    const { field, mode, value, config, on_change, on_blur, paired_value, paired_on_change } = props;
    const symbol = field.currency_symbol || config.default_currency_symbol;
    const decimals = field.decimal_places ?? config.default_decimal_places;
    const num_value = value != null && value !== '' ? Number(value) : null;
    const string_value = num_value != null ? String(num_value) : '';
    const field_style_name = mode === 'view' ? 'field_view' : 'field';
    const field_style = config.style_resolver.has_style(field_style_name)
        ? config.style_resolver.to_style(field_style_name)
        : undefined;
    // Apply style_variant if present
    const variant_style = field.style_variant && config.style_resolver.has_style(field.style_variant)
        ? config.style_resolver.to_style(field.style_variant)
        : undefined;
    const merged_style = variant_style
        ? { ...field_style, ...variant_style }
        : field_style;
    const display_value = num_value != null
        ? format_currency(num_value, symbol, decimals)
        : '';
    // Paired field support
    const has_paired = Boolean(field.paired_field);
    const paired_symbol = field.paired_field?.currency_symbol || symbol;
    const paired_decimals = field.paired_field?.decimal_places ?? decimals;
    const paired_num = paired_value != null && paired_value !== '' ? Number(paired_value) : null;
    const paired_string = paired_num != null ? String(paired_num) : '';
    const paired_display = paired_num != null ? format_currency(paired_num, paired_symbol, paired_decimals) : '';
    const paired_children = has_paired ? (mode === 'edit' ? (_jsxs("div", { className: "cls_data_form_currency_input relative flex items-center", children: [_jsx("span", { className: "absolute left-2 text-gray-500 text-sm pointer-events-none select-none", style: variant_style ? { color: variant_style.color } : undefined, children: paired_symbol }), _jsx("input", { type: "number", className: cn('cls_data_form_currency_number', 'w-full text-right pl-6'), style: merged_style, value: paired_string, placeholder: field.paired_field?.placeholder || '0.00', disabled: field.paired_field?.disabled, step: Math.pow(10, -paired_decimals), min: field.paired_field?.min, max: field.paired_field?.max, onChange: (e) => {
                    const parsed = e.target.value === '' ? '' : parseFloat(e.target.value);
                    paired_on_change?.(parsed === '' ? '' : isNaN(parsed) ? '' : parsed);
                }, onBlur: on_blur })] })) : (_jsx("div", { className: "cls_data_form_currency_view text-right", style: merged_style, children: paired_display || '\u00A0' }))) : undefined;
    return (_jsx(DataFormFieldLayout, { ...props, paired_children: paired_children, children: mode === 'edit' ? (_jsxs("div", { className: "cls_data_form_currency_input relative flex items-center", children: [_jsx("span", { className: "absolute left-2 text-gray-500 text-sm pointer-events-none select-none", style: variant_style ? { color: variant_style.color } : undefined, children: symbol }), _jsx("input", { type: "number", className: cn('cls_data_form_currency_number', 'w-full text-right pl-6'), style: merged_style, value: string_value, placeholder: field.placeholder || '0.00', disabled: field.disabled, step: Math.pow(10, -decimals), min: field.min, max: field.max, onChange: (e) => {
                        const parsed = e.target.value === '' ? '' : parseFloat(e.target.value);
                        on_change(parsed === '' ? '' : isNaN(parsed) ? '' : parsed);
                    }, onBlur: on_blur })] })) : (_jsx("div", { className: "cls_data_form_currency_view text-right", style: merged_style, children: display_value || '\u00A0' })) }));
}
//# sourceMappingURL=currency_field.js.map