import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Masked field renderer for data form
 * Uses display_format/input_mask from field or field_types_config
 */
import { useCallback, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { format_masked_value, extract_raw_value } from '../../../utils/mask_format.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function MaskedField(props) {
    const { field, mode, value, config, on_change, on_blur } = props;
    // Resolve field type definition for custom types
    const type_def = useMemo(() => {
        const ft = field.masked_type || field.field_type;
        if (ft && config.field_types_config.field_types[ft]) {
            return config.field_types_config.field_types[ft];
        }
        return null;
    }, [field.masked_type, field.field_type, config.field_types_config]);
    const display_format = field.display_format || type_def?.display_format || '';
    const input_mask = type_def?.input_mask || display_format;
    const max_length = field.max_length || type_def?.max_length;
    const digit_count = type_def?.digit_count || 0;
    const placeholder = field.placeholder || type_def?.placeholder || display_format;
    const input_mode = type_def?.input_mode || 'text';
    const raw_value = value != null ? String(value) : '';
    // Format for display
    const formatted_value = display_format
        ? format_masked_value(raw_value, display_format)
        : raw_value;
    // Determine style
    const style_class = type_def?.style_class || 'field_mono';
    const field_style_name = mode === 'view' ? 'field_view' : style_class;
    const field_style = config.style_resolver.has_style(field_style_name)
        ? config.style_resolver.to_style(field_style_name)
        : undefined;
    // Apply mono font for masked inputs in edit mode too
    const mono_style = config.style_resolver.has_style('field_mono')
        ? config.style_resolver.to_style('field_mono')
        : undefined;
    const edit_style = mode === 'edit'
        ? { ...field_style, ...mono_style }
        : field_style;
    const handle_change = useCallback((e) => {
        const input_val = e.target.value;
        if (digit_count > 0) {
            const raw = extract_raw_value(input_val, digit_count);
            on_change(raw);
        }
        else {
            on_change(input_val);
        }
    }, [digit_count, on_change]);
    return (_jsx(DataFormFieldLayout, { ...props, children: mode === 'edit' ? (_jsx("input", { type: "text", className: cn('cls_data_form_masked_input', 'w-full'), style: edit_style, value: input_mask ? format_masked_value(raw_value, input_mask) : raw_value, placeholder: placeholder, disabled: field.disabled, maxLength: max_length, inputMode: input_mode, onChange: handle_change, onBlur: on_blur })) : (_jsx("div", { className: "cls_data_form_masked_view", style: edit_style, children: formatted_value || '\u00A0' })) }));
}
//# sourceMappingURL=masked_field.js.map