/**
 * Sortable field item component with expandable field selection
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { FaLayerGroup } from 'react-icons/fa';
import { HiX, HiChevronDown, HiChevronUp } from 'react-icons/hi';
import { RxDragHandleDots2 } from 'react-icons/rx';
/**
 * SortableFieldItem - Expandable draggable item with field-level selection
 */
export function SortableFieldItem({ item, on_remove, on_toggle_expand, on_toggle_field, }) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: item.id });
    const [CheckboxComp, setCheckboxComp] = useState(null);
    useEffect(() => {
        const loadComponents = async () => {
            try {
                const checkboxModule = await import('hazo_ui').catch(() => null);
                if (checkboxModule) {
                    setCheckboxComp({ Checkbox: checkboxModule.Checkbox });
                }
            }
            catch (error) {
                console.warn('[SortableFieldItem] Error loading Checkbox', { error });
            }
        };
        loadComponents();
    }, []);
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : 1,
    };
    const group_fields = item.field_config.fields ?? [];
    const total_fields = group_fields.length;
    const selected_count = item.field_selection
        ? item.field_selection.selected_field_ids.size
        : total_fields;
    const is_partial = selected_count < total_fields && selected_count > 0;
    const is_expanded = item.is_expanded ?? false;
    const render_checkbox = (checked, disabled, onChange) => {
        if (CheckboxComp) {
            return (_jsx(CheckboxComp.Checkbox, { checked: checked, disabled: disabled, onCheckedChange: onChange, className: "h-4 w-4" }));
        }
        return (_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: onChange, className: "h-4 w-4 rounded border-gray-300" }));
    };
    return (_jsxs("div", { ref: setNodeRef, style: style, className: `
        rounded-md border bg-background
        ${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", "aria-label": "Drag to reorder", children: _jsx(RxDragHandleDots2, { className: "h-4 w-4 text-muted-foreground" }) }), total_fields > 0 && (_jsx("button", { onClick: on_toggle_expand, className: "p-1 hover:bg-muted rounded", "aria-label": is_expanded ? 'Collapse fields' : 'Expand fields', children: is_expanded ? (_jsx(HiChevronUp, { className: "h-4 w-4 text-muted-foreground" })) : (_jsx(HiChevronDown, { className: "h-4 w-4 text-muted-foreground" })) })), _jsx(FaLayerGroup, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm truncate", children: item.label }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsxs("span", { className: is_partial ? 'text-amber-600 font-medium' : '', children: [selected_count, "/", total_fields, " field", total_fields !== 1 ? 's' : ''] }), ' • ', item.section_name] })] }), _jsx("button", { onClick: on_remove, className: "p-1 hover:bg-destructive/10 rounded text-muted-foreground hover:text-destructive transition-colors", "aria-label": `Remove ${item.label}`, children: _jsx(HiX, { className: "h-4 w-4" }) })] }), is_expanded && total_fields > 0 && (_jsx("div", { className: "border-t pl-10 pr-3 py-2 space-y-1 bg-muted/30", children: group_fields.map((field, idx) => {
                    const is_selected = item.field_selection
                        ? item.field_selection.selected_field_ids.has(field.id)
                        : true;
                    const is_last = idx === total_fields - 1;
                    const is_disabled = is_selected && selected_count === 1;
                    return (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground w-4 text-xs font-mono", children: is_last ? '└' : '├' }), render_checkbox(is_selected, is_disabled, () => on_toggle_field(field.id)), _jsx("span", { className: `truncate ${is_selected ? '' : 'text-muted-foreground line-through'}`, children: field.label })] }, field.id));
                }) }))] }));
}
//# sourceMappingURL=sortable_field_item.js.map