/**
 * Selected fields panel - combines section sidebar with sortable field list
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo, useRef, useEffect } from 'react';
import { SectionSidebar } from './section_sidebar.js';
import { SortableFieldList } from './sortable_field_list.js';
import { group_items_by_section, update_item_orders } from '../utils.js';
/**
 * SelectedFieldsPanel - Main panel with expand/collapse and field selection
 */
export function SelectedFieldsPanel({ items, on_remove, on_reorder, on_toggle_expand, on_toggle_field, }) {
    const [active_section, set_active_section] = useState(null);
    const prev_items_ref = useRef([]);
    const sections_list = useMemo(() => group_items_by_section(items), [items]);
    const active_section_data = useMemo(() => sections_list.find(s => s.section_name === active_section), [sections_list, active_section]);
    useEffect(() => {
        const prev_ids = new Set(prev_items_ref.current.map(i => i.id));
        const new_item = items.find(i => !prev_ids.has(i.id));
        if (new_item) {
            set_active_section(new_item.section_name);
        }
        else if (!active_section && sections_list.length > 0) {
            set_active_section(sections_list[0].section_name);
        }
        else if (active_section && !sections_list.find(s => s.section_name === active_section)) {
            set_active_section(sections_list.length > 0 ? sections_list[0].section_name : null);
        }
        prev_items_ref.current = items;
    }, [items, sections_list, active_section]);
    const handle_section_click = (section_name) => {
        set_active_section(section_name);
    };
    const handle_section_reorder = (reordered_section_items) => {
        const other_items = items.filter(i => i.section_name !== active_section);
        const new_items = [...other_items, ...reordered_section_items];
        on_reorder(update_item_orders(new_items));
    };
    if (items.length === 0) {
        return (_jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm", children: "No groups selected yet." }), _jsx("p", { className: "text-xs mt-1", children: "Use the search above to add groups or fields." })] }) }));
    }
    return (_jsxs("div", { className: "flex h-full", children: [_jsx("div", { className: "w-48 border-r bg-muted/30 overflow-y-auto", children: _jsx(SectionSidebar, { sections: sections_list, active_section: active_section, on_section_click: handle_section_click }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: active_section_data && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: active_section_data.section_name }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", active_section_data.items.length, " group", active_section_data.items.length !== 1 ? 's' : '', ")"] })] }), _jsx(SortableFieldList, { items: active_section_data.items, on_reorder: handle_section_reorder, on_remove: on_remove, on_toggle_expand: on_toggle_expand, on_toggle_field: on_toggle_field })] })) })] }));
}
//# sourceMappingURL=selected_fields_panel.js.map