/**
 * Question input component for adding new fields
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useRef, useEffect } from 'react';
import { IoAdd } from 'react-icons/io5';
import { cn } from '../../../utils/cn.js';
import { FieldTypeCombobox } from './field_type_combobox.js';
/**
 * QuestionInput - Input field for adding new questions to the pending list
 * Submits on Enter and clears the input, keeping focus
 */
export function QuestionInput({ on_add, placeholder = 'Enter a question and press Enter...', auto_focus = true, available_types, selected_type, on_type_change, combobox_components, hide_type_selector = false, }) {
    const [value, set_value] = useState('');
    const input_ref = useRef(null);
    // Auto-focus on mount
    useEffect(() => {
        if (auto_focus && input_ref.current) {
            input_ref.current.focus();
        }
    }, [auto_focus]);
    const handle_key_down = useCallback((e) => {
        if (e.key === 'Enter' && value.trim()) {
            e.preventDefault();
            on_add(value.trim(), selected_type);
            set_value('');
            // Keep focus on input for rapid entry
            input_ref.current?.focus();
        }
    }, [value, on_add, selected_type]);
    const handle_change = useCallback((e) => {
        set_value(e.target.value);
    }, []);
    const handle_add_click = useCallback(() => {
        if (value.trim()) {
            on_add(value.trim(), selected_type);
            set_value('');
            input_ref.current?.focus();
        }
    }, [value, on_add, selected_type]);
    const is_add_disabled = !value.trim();
    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { ref: input_ref, type: "text", value: value, onChange: handle_change, onKeyDown: handle_key_down, placeholder: placeholder, className: "cls_question_input flex h-10 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" }), !hide_type_selector && (_jsx(FieldTypeCombobox, { value: selected_type, available_types: available_types, on_change: on_type_change, combobox_components: combobox_components })), _jsx("button", { type: "button", onClick: handle_add_click, disabled: is_add_disabled, className: cn('cls_question_add_btn inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors flex-shrink-0', is_add_disabled
                            ? 'border-input text-muted-foreground cursor-not-allowed'
                            : 'border-primary bg-primary text-primary-foreground hover:bg-primary/90'), "aria-label": "Add field", title: "Add field", children: _jsx(IoAdd, { className: "h-5 w-5" }) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Press Enter or click + to add the question" })] }));
}
//# sourceMappingURL=question_input.js.map