import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Section renderer for HazoDataForm
 * Renders ViewSection: header with style_variant, collapsibility, and groups
 */
import { useState, useCallback } from 'react';
import { cn } from '../../utils/cn.js';
import { GroupRenderer } from './group_renderer.js';
export function SectionRenderer({ section, mode, form_data, config, on_field_change, on_doc_link_click, file_uploads, on_upload_click, upload_enabled, reference_data, on_reference_delete, show_header = true, collapsible = false, initial_collapsed = false, on_collapse_toggle, collapsible_groups, collapsed_groups_set, on_group_toggle, field_action_components, field_actions, }) {
    const [is_collapsed, set_is_collapsed] = useState(initial_collapsed);
    const groups = section.groups || [];
    const section_name = section.section_name || '';
    // Style for section header
    const variant_style = section.style_variant && config.style_resolver.has_style(section.style_variant)
        ? config.style_resolver.to_style(section.style_variant)
        : undefined;
    const handle_toggle = useCallback(() => {
        const new_state = !is_collapsed;
        set_is_collapsed(new_state);
        on_collapse_toggle?.(section_name, new_state);
    }, [is_collapsed, section_name, on_collapse_toggle]);
    return (_jsxs("div", { className: cn('cls_data_form_section', 'mb-4'), children: [show_header && section_name && (_jsxs("div", { className: cn('cls_data_form_section_header', 'flex items-center gap-2 py-2 px-3 rounded-t', collapsible && 'cursor-pointer select-none', !variant_style && 'bg-gray-100 border-b border-gray-200'), style: variant_style, onClick: collapsible ? handle_toggle : undefined, role: collapsible ? 'button' : undefined, tabIndex: collapsible ? 0 : undefined, onKeyDown: collapsible ? (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        handle_toggle();
                    }
                } : undefined, children: [collapsible && (_jsx("svg", { className: cn('w-4 h-4 shrink-0 transition-transform', is_collapsed && '-rotate-90'), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })), _jsx("span", { className: "font-semibold text-sm", children: section_name })] })), !is_collapsed && (_jsxs("div", { className: cn('cls_data_form_section_content', 'px-1 pt-1'), children: [groups.map((group) => {
                        // Skip hidden groups
                        if (group.visibility === 'hidden')
                            return null;
                        return (_jsx(GroupRenderer, { group: group, mode: mode, form_data: form_data, config: config, on_field_change: on_field_change, on_doc_link_click: on_doc_link_click, file_uploads: file_uploads, on_upload_click: on_upload_click, upload_enabled: upload_enabled, reference_data: reference_data, on_reference_delete: on_reference_delete, collapsible: group.collapsible ?? collapsible_groups, initial_collapsed: group.initial_collapsed ?? collapsed_groups_set?.has(group.id) ?? false, on_collapse_toggle: on_group_toggle, section_id: section_name || undefined, field_action_components: field_action_components, field_actions: field_actions }, group.id));
                    }), groups.length === 0 && (_jsx("div", { className: "text-sm text-gray-400 py-4 text-center italic", children: "No fields in this section" }))] }))] }));
}
//# sourceMappingURL=section_renderer.js.map