'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * HazoTemplateGenerator - Main Component
 * Visual template builder for form configurations
 * Updated for multi-section support
 */
import { useCallback } from 'react';
import { TemplateGeneratorProvider, useTemplateGenerator } from './context.js';
import { EditorThemeProvider } from '../shared/editor_theme/index.js';
import { Toolbar } from './components/toolbar.js';
import { SectionTree } from './components/section_tree.js';
import { FieldEditor } from './components/field_editor.js';
import { PreviewDialog } from './components/preview_dialog.js';
import { PreviewPanel } from './components/preview_panel.js';
import { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from './components/ui/resizable.js';
import { cn } from '../../utils/cn.js';
/**
 * Inner component that uses the context
 */
function TemplateGeneratorInner({ on_save, on_cancel, available_templates, on_load_template, preview_chat_group_id, readonly = false, show_import_export = false, show_controls_tab = false, className, }) {
    const { state, actions } = useTemplateGenerator();
    const handle_save = useCallback(() => {
        if (on_save) {
            const errors = actions.validate_template();
            if (errors.length === 0) {
                // Emit FormSetData format
                const data = {
                    sections: state.sections,
                    icons_behaviour: state.icons_behaviour,
                };
                on_save(data);
            }
        }
    }, [on_save, actions, state.sections, state.icons_behaviour]);
    return (_jsxs("div", { className: cn('flex flex-col h-full bg-background', className), children: [_jsx(Toolbar, { on_save: on_save ? handle_save : undefined, on_cancel: on_cancel, available_templates: available_templates, on_load_template: on_load_template, readonly: readonly, show_import_export: show_import_export }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "w-72 border-r bg-slate-50/50 dark:bg-slate-900/30 flex flex-col shrink-0", children: _jsx(SectionTree, { readonly: readonly }) }), _jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "flex-1", children: [_jsx(ResizablePanel, { defaultSize: 50, minSize: 30, children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(FieldEditor, { readonly: readonly, show_controls_tab: show_controls_tab }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, minSize: 25, children: _jsx(PreviewPanel, { chat_group_id: preview_chat_group_id }) })] })] }), _jsx(PreviewDialog, { open: state.is_preview_open, on_close: actions.close_preview, chat_group_id: preview_chat_group_id })] }));
}
/**
 * HazoTemplateGenerator
 *
 * A visual template builder for creating and editing form configurations.
 *
 * Features:
 * - Drag-and-drop field reordering
 * - Visual field editor with tabs for all properties
 * - Live preview of the form
 * - Undo/redo with keyboard shortcuts
 * - Import/export JSON
 * - Validation with error highlighting
 */
export function HazoTemplateGenerator({ initial_template, on_template_change, on_save, on_cancel, available_templates, on_load_template, preview_chat_group_id, show_summary_editor, readonly = false, show_import_export = false, show_controls_tab = false, theme, className, }) {
    return (_jsx(TemplateGeneratorProvider, { initial_template: initial_template, on_template_change: on_template_change, children: _jsx(EditorThemeProvider, { theme: theme, children: _jsx(TemplateGeneratorInner, { on_save: on_save, on_cancel: on_cancel, available_templates: available_templates, on_load_template: on_load_template, preview_chat_group_id: preview_chat_group_id, show_summary_editor: show_summary_editor, readonly: readonly, show_import_export: show_import_export, show_controls_tab: show_controls_tab, className: className }) }) }));
}
export default HazoTemplateGenerator;
//# sourceMappingURL=template_generator.js.map