/**
 * Sortable pending field item with accordion for options
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { HiX, HiChevronDown, HiChevronRight, HiFolder, HiDocumentText } from 'react-icons/hi';
import { RxDragHandleDots2 } from 'react-icons/rx';
import { cn } from '../../../utils/cn.js';
import { FieldTypeCombobox } from './field_type_combobox.js';
import { OptionsListEditor } from '../options/options_list_editor.js';
import { DateOptions } from '../options/date_options.js';
import { FileTextboxOptions } from '../options/file_textbox_options.js';
/**
 * PendingFieldItem - Sortable item with drag handle, type selector, and expandable options
 */
export function PendingFieldItem({ item, available_types, on_type_change, on_remove, on_toggle_expand, on_required_change, on_accept_files_change, on_options_change, on_date_config_change, on_checkbox_config_change, on_file_textbox_config_change, combobox_components, file_textbox_hide_classification, file_textbox_hide_tags, }) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: item.id });
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : 1,
    };
    // Determine which type-specific options to show
    const shows_options_list = useMemo(() => ['HazoCollabFormRadio', 'HazoCollabFormCombo'].includes(item.field_type), [item.field_type]);
    const shows_date_options = item.field_type === 'HazoCollabFormDate';
    const shows_checkbox_options = item.field_type === 'HazoCollabFormCheckbox';
    const shows_file_textbox_options = item.field_type === 'HazoCollabFormFileTextbox';
    // Document upload and file textbox don't need file accept mode since they handle files natively
    // Groups also don't show accept_public_files in the add field dialog
    const shows_accept_files = item.field_type !== 'HazoCollabFormDoc' && item.field_type !== 'Group' && item.field_type !== 'HazoCollabFormFileTextbox';
    // Groups and file textbox don't have "required" option
    const shows_required = item.field_type !== 'Group' && item.field_type !== 'HazoCollabFormFileTextbox';
    // Check if there are any options to show in the accordion
    const has_options = shows_required || shows_accept_files || shows_options_list || shows_date_options || shows_checkbox_options || shows_file_textbox_options;
    return (_jsxs("div", { ref: setNodeRef, style: style, className: cn('cls_pending_field_item rounded-md border bg-blue-50 dark:bg-blue-950/20', isDragging ? 'border-primary shadow-lg' : 'border-border', 'hover:border-muted-foreground/50 transition-colors'), children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("button", { ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing p-1 hover:bg-muted rounded flex-shrink-0", "aria-label": "Drag to reorder", children: _jsx(RxDragHandleDots2, { className: "h-4 w-4 text-muted-foreground" }) }), has_options && (_jsx("button", { onClick: () => on_toggle_expand(item.id), className: "p-1 hover:bg-muted rounded flex-shrink-0", "aria-label": item.is_expanded ? 'Collapse options' : 'Expand options', children: item.is_expanded ? (_jsx(HiChevronDown, { className: "h-4 w-4 text-muted-foreground" })) : (_jsx(HiChevronRight, { className: "h-4 w-4 text-muted-foreground" })) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "text-sm truncate block", children: item.label }), item.source === 'library' && item.library_key && (_jsxs("span", { className: "text-[10px] text-muted-foreground truncate block", children: ["from library: ", item.library_key] }))] }), item.field_type === 'Group' ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground px-2 py-1 bg-muted rounded flex-shrink-0", children: [_jsx(HiFolder, { className: "h-3.5 w-3.5 text-amber-500" }), "Group"] })) : item.field_type === 'HazoCollabFormFileTextbox' ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground px-2 py-1 bg-muted rounded flex-shrink-0", children: [_jsx(HiDocumentText, { className: "h-3.5 w-3.5 text-blue-500" }), "File Textbox"] })) : (_jsx(FieldTypeCombobox, { value: item.field_type, available_types: available_types, on_change: (type) => on_type_change(item.id, type), id: item.id, combobox_components: combobox_components })), _jsx("button", { onClick: () => on_remove(item.id), className: "p-1 hover:bg-destructive/10 rounded text-muted-foreground hover:text-destructive transition-colors flex-shrink-0", "aria-label": `Remove "${item.label}"`, children: _jsx(HiX, { className: "h-4 w-4" }) })] }), item.is_expanded && has_options && (_jsxs("div", { className: "border-t px-3 py-3 space-y-3 bg-muted/30", children: [(shows_required || shows_accept_files) && (_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [shows_required && (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("input", { id: `${item.id}-required`, type: "checkbox", checked: item.required, onChange: e => on_required_change(item.id, e.target.checked), className: "cls_pending_field_checkbox h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" }), _jsx("label", { htmlFor: `${item.id}-required`, className: "text-sm font-medium leading-none cursor-pointer", children: "Required field" })] })), shows_accept_files && (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("label", { htmlFor: `${item.id}-accept-files`, className: "text-sm font-medium leading-none cursor-pointer", children: "Files" }), _jsxs("select", { id: `${item.id}-accept-files`, value: item.accept_public_files, onChange: e => on_accept_files_change(item.id, e.target.value), className: "px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-primary/40", children: [_jsx("option", { value: "none", children: "None" }), _jsx("option", { value: "basic_upload", children: "Basic Upload" }), _jsx("option", { value: "ai_upload", children: "AI Upload" })] })] }))] })), shows_options_list && (_jsx(OptionsListEditor, { options: item.options || [{ label: 'Option 1', value: 'option_1' }], on_options_change: (options) => on_options_change(item.id, options), label: item.field_type === 'HazoCollabFormRadio' ? 'Radio Options' : 'Dropdown Options' })), shows_date_options && (_jsx(DateOptions, { config: item.date_config || { date_mode: 'single' }, on_config_change: (config) => on_date_config_change(item.id, config) })), shows_checkbox_options && (_jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "text-sm font-medium leading-none", children: "Checkbox Labels (optional)" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: `${item.id}-checked-label`, className: "text-xs text-muted-foreground", children: "When checked" }), _jsx("input", { id: `${item.id}-checked-label`, type: "text", value: item.checkbox_config?.checked_label || '', onChange: e => on_checkbox_config_change(item.id, {
                                                    ...item.checkbox_config,
                                                    checked_label: e.target.value || undefined,
                                                }), placeholder: "Yes", className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: `${item.id}-unchecked-label`, className: "text-xs text-muted-foreground", children: "When unchecked" }), _jsx("input", { id: `${item.id}-unchecked-label`, type: "text", value: item.checkbox_config?.unchecked_label || '', onChange: e => on_checkbox_config_change(item.id, {
                                                    ...item.checkbox_config,
                                                    unchecked_label: e.target.value || undefined,
                                                }), placeholder: "No", className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" })] })] })] })), shows_file_textbox_options && on_file_textbox_config_change && (_jsx(FileTextboxOptions, { config: item.file_textbox_config ?? {}, on_config_change: (config) => on_file_textbox_config_change(item.id, config), id_prefix: item.id, hide_classification: file_textbox_hide_classification, hide_tags: file_textbox_hide_tags }))] }))] }));
}
//# sourceMappingURL=pending_field_item.js.map