/**
 * Collaboration form masked input component
 * Provides formatted input with display mask (e.g., 'XXX XXX XXX' for TFN)
 * Strips non-digits on input, formats with mask on display
 */
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../utils/cn.js';
import { format_masked_value, extract_raw_value } from '../utils/mask_format.js';
import { get_dom_safe_props } from '../utils/filter_dom_props.js';
import { use_base_form_field } from './shared/use_base_form_field.js';
import { BaseFieldLayout } from './shared/base_field_layout.js';
import { strip_base_props } from './shared/strip_base_props.js';
/**
 * Get digit count from display format
 */
function get_digit_count(display_format, digit_count) {
    if (digit_count !== undefined)
        return digit_count;
    if (!display_format)
        return 20;
    return display_format.replace(/[^X#]/g, '').length;
}
/**
 * Collaboration form masked input component
 */
export const HazoCollabFormMasked = React.forwardRef((props, ref) => {
    const base = use_base_form_field(props, ref);
    if (base.should_hide)
        return null;
    const { value, onChange, field_validator, display_format = '', digit_count, masked_type, input_wrapper_class_name, } = props;
    const effective_digit_count = get_digit_count(display_format, digit_count);
    const handle_change = React.useCallback((e) => {
        // Strip non-digits and limit to digit_count
        const raw = extract_raw_value(e.target.value, effective_digit_count);
        if (field_validator) {
            base.set_validation_error(field_validator(raw));
        }
        onChange(raw);
    }, [field_validator, onChange, base.set_validation_error, effective_digit_count]);
    // Strip base props to get only DOM-safe attributes
    const rest_props = strip_base_props(props);
    delete rest_props.value;
    delete rest_props.onChange;
    delete rest_props.display_format;
    delete rest_props.digit_count;
    delete rest_props.masked_type;
    delete rest_props.input_wrapper_class_name;
    const is_readonly = base.locked || base.skipped;
    const formatted_value = display_format ? format_masked_value(value, display_format) : value;
    return (_jsx(BaseFieldLayout, { base: base, wrapper_class_name: "cls_collab_masked_wrapper", wrapper_extra_class_name: input_wrapper_class_name, children: is_readonly ? (_jsx("div", { className: cn('cls_collab_masked_display w-full h-9 rounded-md border border-input bg-slate-100 px-3 py-1 text-base flex items-center font-mono tracking-wider md:text-sm', base.skipped && 'opacity-60'), children: formatted_value })) : (_jsx("input", { ref: base.component_ref, id: base.field_id_final, type: "text", value: formatted_value, onChange: handle_change, disabled: base.is_field_disabled, placeholder: display_format || undefined, maxLength: display_format ? display_format.length : undefined, className: cn('cls_collab_masked w-full h-9 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors font-mono tracking-wider placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', base.display_error && 'border-destructive focus-visible:ring-destructive', base.show_required_highlight && 'bg-red-50', base.className), "aria-invalid": base.display_error ? 'true' : 'false', "aria-describedby": base.display_error ? `${base.field_id_final}-error` : undefined, ...get_dom_safe_props(rest_props) })) }));
});
HazoCollabFormMasked.displayName = 'HazoCollabFormMasked';
//# sourceMappingURL=hazo_collab_form_masked.js.map