'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Basic Tab - ID, Label, Description, Required, Accept Files, Editable, Additional Entry
 */
import { useCallback } from 'react';
import { HiRefresh } from 'react-icons/hi';
import { label_to_id } from '../../utils/id_generator.js';
import { Switch } from '../ui/switch.js';
import { cn } from '../../../../utils/cn.js';
import { EditorSection, EditorLabel, EditorInput, EditorTextArea, EditorHelpText, SwitchCard, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
export function BasicTab({ field, on_update, on_commit, readonly = false }) {
    // Handle label change
    const handle_label_change = useCallback((value) => {
        on_update({ label: value });
    }, [on_update]);
    // Handle ID change
    const handle_id_change = useCallback((value) => {
        on_update({ id: value.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '') });
    }, [on_update]);
    // Generate ID from label (snake_case)
    const handle_generate_id = useCallback(() => {
        if (field.label) {
            const generated_id = label_to_id(field.label);
            on_update({ id: generated_id });
            on_commit('Generate ID from label');
        }
    }, [field.label, on_update, on_commit]);
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.label, required: true, children: "Label" }), _jsx(EditorInput, { type: "text", value: field.label || '', onChange: (e) => handle_label_change(e.target.value), onBlur: () => on_commit('Update label'), disabled: readonly, placeholder: "Enter field label" }), _jsx(EditorHelpText, { children: "The label displayed to users" })] }), _jsxs(EditorSection, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(EditorLabel, { icon: LABEL_ICONS.id, required: true, children: "Field ID" }), _jsxs("button", { type: "button", onClick: handle_generate_id, disabled: readonly || !field.label, className: cn('flex items-center gap-1.5 px-2.5 py-1 text-xs rounded border hover:bg-muted transition-colors', (readonly || !field.label) && 'opacity-50 cursor-not-allowed'), title: "Generate ID from label", children: [_jsx(HiRefresh, { className: "w-3.5 h-3.5" }), "Generate from label"] })] }), _jsx(EditorInput, { type: "text", value: field.id || '', onChange: (e) => handle_id_change(e.target.value), onBlur: () => on_commit('Update ID'), disabled: readonly, className: "font-mono", placeholder: "field_id" }), _jsx(EditorHelpText, { children: "Unique identifier used in form data. Use lowercase letters, numbers, and underscores." })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.description, children: "Description / Help Text" }), _jsx(EditorTextArea, { value: field.description || '', onChange: (e) => on_update({ description: e.target.value }), onBlur: () => on_commit('Update description'), disabled: readonly, rows: 3, placeholder: "Help text shown below the field" })] }), _jsxs(EditorSection, { last: field.field_type !== 'field', children: [_jsx(EditorLabel, { icon: LABEL_ICONS.reference, children: "Reference Tag" }), _jsxs("div", { className: "flex gap-2 max-w-lg", children: [_jsx(EditorInput, { type: "text", value: field.reference_label || '', onChange: (e) => on_update({ reference_label: e.target.value }), onBlur: () => on_commit('Update reference label'), disabled: readonly, field_width: "full", className: "w-1/3", placeholder: "Label" }), _jsx(EditorInput, { type: "text", value: field.reference_value || '', onChange: (e) => on_update({ reference_value: e.target.value }), onBlur: () => on_commit('Update reference value'), disabled: readonly, field_width: "full", className: "flex-1", placeholder: "Value" })] }), _jsx(EditorHelpText, { children: "Optional tag displayed below the field (e.g., \"Source: ITR 2023\")" })] }), field.field_type === 'field' && (_jsx(EditorSection, { last: true, children: _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(SwitchCard, { icon: LABEL_ICONS.required, label: "Required Field", description: "Show red asterisk", children: _jsx(Switch, { checked: field.required ?? false, onCheckedChange: (checked) => {
                                    on_update({ required: checked });
                                    on_commit('Toggle required');
                                }, disabled: readonly }) }), _jsx(SwitchCard, { icon: LABEL_ICONS.files, label: "Public Files", description: "File upload mode", children: _jsxs("select", { value: field.accept_public_files ?? 'none', onChange: (e) => {
                                    on_update({ accept_public_files: e.target.value });
                                    on_commit('Update public file mode');
                                }, disabled: readonly, className: cn('px-2 py-1 border rounded text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary/40', readonly && 'bg-muted cursor-not-allowed'), children: [_jsx("option", { value: "none", children: "None" }), _jsx("option", { value: "basic_upload", children: "Basic Upload" }), _jsx("option", { value: "ai_upload", children: "AI Upload" })] }) }), _jsx(SwitchCard, { icon: LABEL_ICONS.files, label: "Private Files", description: "File upload mode", children: _jsxs("select", { value: field.accept_private_files ?? 'none', onChange: (e) => {
                                    on_update({ accept_private_files: e.target.value });
                                    on_commit('Update private file mode');
                                }, disabled: readonly, className: cn('px-2 py-1 border rounded text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary/40', readonly && 'bg-muted cursor-not-allowed'), children: [_jsx("option", { value: "none", children: "None" }), _jsx("option", { value: "basic_upload", children: "Basic Upload" })] }) }), _jsx(SwitchCard, { icon: LABEL_ICONS.editable, label: "Editable", description: "Allow value changes", children: _jsx(Switch, { checked: field.data_ok_editable ?? true, onCheckedChange: (checked) => {
                                    on_update({ data_ok_editable: checked });
                                    on_commit('Toggle editable');
                                }, disabled: readonly }) }), _jsx(SwitchCard, { icon: LABEL_ICONS.additional_entry, label: "Additional Entry", description: "Allow duplicating field", children: _jsxs("div", { className: "flex items-center gap-3", children: [field.additional_entry && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-muted-foreground whitespace-nowrap", children: "Max:" }), _jsx("input", { type: "number", value: field.max_additional_entries ?? 10, onChange: (e) => on_update({
                                                    max_additional_entries: e.target.value ? parseInt(e.target.value) : undefined
                                                }), onBlur: () => on_commit('Update max entries'), disabled: readonly, min: 1, className: cn('w-16 px-2 py-1 border rounded text-sm text-center', 'focus:outline-none focus:ring-2 focus:ring-primary/40', readonly && 'bg-muted cursor-not-allowed') })] })), _jsx(Switch, { checked: field.additional_entry ?? false, onCheckedChange: (checked) => {
                                            on_update({ additional_entry: checked });
                                            on_commit('Toggle additional entry');
                                        }, disabled: readonly })] }) })] }) }))] }));
}
//# sourceMappingURL=basic_tab.js.map