'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Section Tab - Editor for Section properties
 */
import { useCallback } from 'react';
import { cn } from '../../../../utils/cn.js';
import { EditorSection, EditorLabel, EditorInput, EditorHelpText, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
export function SectionTab({ section, on_update, on_commit, readonly = false, }) {
    // Handle input change with commit on blur
    const handle_name_change = useCallback((value) => {
        on_update({ section_name: value });
    }, [on_update]);
    const handle_name_blur = useCallback(() => {
        on_commit('Update section name');
    }, [on_commit]);
    const handle_accept_public_files_change = useCallback((value) => {
        on_update({ accept_public_files: value });
        on_commit('Update section public file mode');
    }, [on_update, on_commit]);
    const handle_accept_private_files_change = useCallback((value) => {
        on_update({ accept_private_files: value });
        on_commit('Update section private file mode');
    }, [on_update, on_commit]);
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.section_name, children: "Section Name" }), _jsx(EditorInput, { type: "text", value: section.section_name ?? '', onChange: (e) => handle_name_change(e.target.value), onBlur: handle_name_blur, disabled: readonly, placeholder: "Enter section name" }), _jsx(EditorHelpText, { children: "The name displayed in the form sidebar" })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.files, children: "Public Files" }), _jsxs("select", { id: "accept_public_files", value: section.accept_public_files ?? 'none', onChange: (e) => handle_accept_public_files_change(e.target.value), disabled: readonly, className: cn('px-2 py-1 border rounded text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary/40', readonly && 'bg-muted cursor-not-allowed'), children: [_jsx("option", { value: "none", children: "None" }), _jsx("option", { value: "basic_upload", children: "Basic Upload" }), _jsx("option", { value: "ai_upload", children: "AI Upload" })] }), _jsx(EditorHelpText, { children: "File upload mode at the section level" })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.files, children: "Private Files" }), _jsxs("select", { id: "accept_private_files", value: section.accept_private_files ?? 'none', onChange: (e) => handle_accept_private_files_change(e.target.value), disabled: readonly, className: cn('px-2 py-1 border rounded text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary/40', readonly && 'bg-muted cursor-not-allowed'), children: [_jsx("option", { value: "none", children: "None" }), _jsx("option", { value: "basic_upload", children: "Basic Upload" })] }), _jsx(EditorHelpText, { children: "Private file upload mode at the section level" })] }), _jsx(EditorSection, { children: _jsxs("div", { className: "p-3 rounded-lg bg-muted/30 border", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Section Info" }), _jsx("dl", { className: "space-y-1 text-xs", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("dt", { className: "text-muted-foreground", children: "Groups:" }), _jsx("dd", { className: "font-mono", children: section.groups?.length ?? 0 })] }) })] }) }), _jsx(EditorSection, { last: true, children: _jsx("div", { className: "text-xs text-muted-foreground", children: _jsx("p", { children: "Sections are top-level containers for groups and fields. Each section appears as a separate tab/page in the form." }) }) })] }));
}
//# sourceMappingURL=section_tab.js.map