'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Validation Tab - Input format and validation rules
 */
import React, { useCallback } from 'react';
import { INPUT_TYPES } from '../../types.js';
import { cn } from '../../../../utils/cn.js';
import { EditorSection, EditorLabel, EditorInput, EditorHelpText, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
const INPUT_TYPE_LABELS = {
    mixed: { label: 'Mixed', description: 'Any characters allowed' },
    numeric: { label: 'Numeric', description: 'Numbers only (0-9, decimal, negative)' },
    email: { label: 'Email', description: 'Valid email format' },
    alpha: { label: 'Alpha', description: 'Letters only (A-Z, a-z)' },
};
export function ValidationTab({ field, on_update, on_commit, readonly = false }) {
    const input_format = field.input_format ?? {};
    // Update input format
    const update_format = useCallback((updates) => {
        on_update({
            input_format: { ...input_format, ...updates },
        });
    }, [input_format, on_update]);
    // Check if this field type supports validation
    const supports_validation = [
        'HazoCollabFormInputbox',
        'HazoCollabFormTextArea',
    ].includes(field.component_type ?? '');
    if (!supports_validation) {
        return (_jsx("div", { className: "text-center py-8 text-muted-foreground", children: _jsx("p", { children: "Validation options are only available for text input fields." }) }));
    }
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.input_type, children: "Input Type" }), _jsx("div", { className: "grid grid-cols-2 gap-2 max-w-2xl", children: INPUT_TYPES.map((type) => {
                            const info = INPUT_TYPE_LABELS[type];
                            const is_selected = field.input_type === type || (!field.input_type && type === 'mixed');
                            return (_jsxs("button", { onClick: () => {
                                    on_update({ input_type: type });
                                    on_commit('Set input type');
                                }, disabled: readonly, className: cn('p-3 border rounded-lg text-left transition-colors', is_selected
                                    ? 'border-primary bg-primary/5 ring-1 ring-primary'
                                    : 'hover:bg-muted/50', readonly && 'opacity-50 cursor-not-allowed'), children: [_jsx("div", { className: "font-medium text-sm", children: info.label }), _jsx("div", { className: "text-xs text-muted-foreground", children: info.description })] }, type));
                        }) })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.format_guide, children: "Format Guide" }), _jsx(EditorInput, { type: "text", value: input_format.format_guide ?? '', onChange: (e) => update_format({ format_guide: e.target.value }), onBlur: () => on_commit('Update format guide'), disabled: readonly, placeholder: "e.g., Enter 9 digits" }), _jsx(EditorHelpText, { children: "Hint text shown to users about the expected format" })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.text_length, children: "Text Length" }), _jsxs("div", { className: "flex gap-4 max-w-lg", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "text-xs text-muted-foreground", children: "Minimum" }), _jsx(EditorInput, { type: "number", value: input_format.text_min_len ?? '', onChange: (e) => update_format({
                                            text_min_len: e.target.value ? parseInt(e.target.value) : undefined
                                        }), onBlur: () => on_commit('Update min length'), disabled: readonly, min: 0, field_width: "full", placeholder: "No min" })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "text-xs text-muted-foreground", children: "Maximum" }), _jsx(EditorInput, { type: "number", value: input_format.text_max_len ?? '', onChange: (e) => update_format({
                                            text_max_len: e.target.value ? parseInt(e.target.value) : undefined
                                        }), onBlur: () => on_commit('Update max length'), disabled: readonly, min: 1, field_width: "full", placeholder: "No max" })] })] })] }), field.input_type === 'numeric' && (_jsx(EditorSection, { children: _jsxs("div", { className: "space-y-4 p-4 border rounded-lg bg-muted/20", children: [_jsx(EditorLabel, { icon: LABEL_ICONS.numeric, children: "Numeric Constraints" }), _jsxs("div", { className: "flex gap-4 max-w-lg", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "text-xs text-muted-foreground", children: "Minimum Value" }), _jsx(EditorInput, { type: "number", value: input_format.num_min ?? '', onChange: (e) => update_format({
                                                num_min: e.target.value ? parseFloat(e.target.value) : undefined
                                            }), onBlur: () => on_commit('Update min value'), disabled: readonly, field_width: "full", placeholder: "No min" })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "text-xs text-muted-foreground", children: "Maximum Value" }), _jsx(EditorInput, { type: "number", value: input_format.num_max ?? '', onChange: (e) => update_format({
                                                num_max: e.target.value ? parseFloat(e.target.value) : undefined
                                            }), onBlur: () => on_commit('Update max value'), disabled: readonly, field_width: "full", placeholder: "No max" })] })] }), _jsxs("div", { className: "max-w-lg", children: [_jsx("label", { className: "text-xs text-muted-foreground", children: "Decimal Places" }), _jsx(EditorInput, { type: "number", value: input_format.num_decimals ?? '', onChange: (e) => update_format({
                                        num_decimals: e.target.value ? parseInt(e.target.value) : undefined
                                    }), onBlur: () => on_commit('Update decimal places'), disabled: readonly, min: 0, field_width: "full", placeholder: "Any" })] })] }) })), _jsxs(EditorSection, { last: true, children: [_jsx(EditorLabel, { icon: LABEL_ICONS.regex, children: "Regex Pattern" }), _jsx(EditorInput, { type: "text", value: input_format.regex ?? '', onChange: (e) => update_format({ regex: e.target.value }), onBlur: () => on_commit('Update regex'), disabled: readonly, className: "font-mono", placeholder: "^[0-9]{9}$" }), _jsx(EditorHelpText, { children: "Optional regular expression pattern for custom validation" }), input_format.regex && (_jsx(RegexTester, { regex: input_format.regex }))] })] }));
}
// Helper component for testing regex
function RegexTester({ regex }) {
    const [test_value, set_test_value] = React.useState('');
    const [is_valid, set_is_valid] = React.useState(null);
    const handle_test = useCallback((value) => {
        set_test_value(value);
        try {
            const re = new RegExp(regex);
            set_is_valid(re.test(value));
        }
        catch {
            set_is_valid(null);
        }
    }, [regex]);
    return (_jsxs("div", { className: "flex items-center gap-2 mt-2", children: [_jsx("input", { type: "text", value: test_value, onChange: (e) => handle_test(e.target.value), className: "flex-1 px-2 py-1 border rounded text-sm", placeholder: "Test value..." }), test_value && is_valid !== null && (_jsx("span", { className: cn('text-xs px-2 py-1 rounded', is_valid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'), children: is_valid ? 'Valid' : 'Invalid' }))] }));
}
//# sourceMappingURL=validation_tab.js.map