import { jsx as _jsx } from "react/jsx-runtime";
import { format_currency } from '../../../utils/financial_format.js';
import { format_percentage } from '../../../utils/financial_format.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function ComputedField(props) {
    const { field, value, config } = props;
    const num_value = value != null && value !== '' ? Number(value) : null;
    // 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 field_view_style = config.style_resolver.has_style('field_view')
        ? config.style_resolver.to_style('field_view')
        : undefined;
    const merged_style = variant_style
        ? { ...field_view_style, ...variant_style }
        : field_view_style;
    // Format based on field type context
    let display_value = '';
    if (num_value != null && !isNaN(num_value)) {
        if (field.is_percentage) {
            display_value = format_percentage(num_value, field.decimal_places ?? config.default_decimal_places, config.percentage_suffix);
        }
        else if (field.currency_symbol || field.field_type === 'computed') {
            const symbol = field.currency_symbol || config.default_currency_symbol;
            display_value = format_currency(num_value, symbol, field.decimal_places ?? config.default_decimal_places);
        }
        else {
            display_value = String(num_value);
        }
    }
    return (_jsx(DataFormFieldLayout, { ...props, computed_formula: field.computed_formula, children: _jsx("div", { className: "cls_data_form_computed_view text-right", style: merged_style, children: display_value || '\u00A0' }) }));
}
//# sourceMappingURL=computed_field.js.map