'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Toolbar - Tabs (Fields/Groups) + area filter + Import All / Export All
 */
import { useCallback, useState } from 'react';
import { HiDownload, HiUpload, HiDocument, HiFolder, HiTemplate } from 'react-icons/hi';
import { useFieldLibrary } from '../context.js';
import { AreaCombobox } from './area_combobox.js';
import { ImportExportDialog } from './import_export_dialog.js';
import { TemplateLoaderDialog } from './template_loader_dialog.js';
import { cn } from '../../../utils/cn.js';
export function Toolbar() {
    const { active_tab, set_active_tab, set_selected_id, area_filter, set_area_filter, elements: { areas }, templates, } = useFieldLibrary();
    const [import_export_open, set_import_export_open] = useState(false);
    const [import_export_mode, set_import_export_mode] = useState('import');
    const [template_loader_open, set_template_loader_open] = useState(false);
    const handle_tab_change = useCallback((tab) => {
        set_active_tab(tab);
        set_selected_id(null);
    }, [set_active_tab, set_selected_id]);
    const handle_open_import_all = useCallback(() => {
        set_import_export_mode('import');
        set_import_export_open(true);
    }, []);
    const handle_open_export_all = useCallback(() => {
        set_import_export_mode('export');
        set_import_export_open(true);
    }, []);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3 p-3 border-b bg-muted/20", children: [_jsxs("div", { className: "flex border rounded-md overflow-hidden", children: [_jsxs("button", { onClick: () => handle_tab_change('fields'), className: cn('flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-colors', active_tab === 'fields'
                                    ? 'bg-primary text-primary-foreground'
                                    : 'hover:bg-muted text-muted-foreground'), children: [_jsx(HiDocument, { className: "h-3.5 w-3.5" }), "Fields"] }), _jsxs("button", { onClick: () => handle_tab_change('groups'), className: cn('flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-colors', active_tab === 'groups'
                                    ? 'bg-primary text-primary-foreground'
                                    : 'hover:bg-muted text-muted-foreground'), children: [_jsx(HiFolder, { className: "h-3.5 w-3.5" }), "Groups"] })] }), _jsx("div", { className: "flex-1 max-w-xs", children: _jsx(AreaCombobox, { value: area_filter || '', on_change: (area) => set_area_filter(area || null), areas: areas, placeholder: "All Areas" }) }), _jsx("div", { className: "flex-1" }), templates && templates.length > 0 && (_jsxs("button", { onClick: () => set_template_loader_open(true), className: "flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-md hover:bg-muted transition-colors text-muted-foreground", title: "Import fields from a form template", children: [_jsx(HiTemplate, { className: "h-4 w-4" }), "Import Template"] })), _jsxs("button", { onClick: handle_open_import_all, className: "flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-md hover:bg-muted transition-colors text-muted-foreground", title: "Import all elements from JSON", children: [_jsx(HiUpload, { className: "h-4 w-4" }), "Import All"] }), _jsxs("button", { onClick: handle_open_export_all, className: "flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-md hover:bg-muted transition-colors text-muted-foreground", title: "Export all elements to JSON", children: [_jsx(HiDownload, { className: "h-4 w-4" }), "Export All"] })] }), _jsx(ImportExportDialog, { open: import_export_open, on_close: () => set_import_export_open(false), initial_mode: import_export_mode, export_all: true }), templates && templates.length > 0 && (_jsx(TemplateLoaderDialog, { open: template_loader_open, on_close: () => set_template_loader_open(false), templates: templates }))] }));
}
//# sourceMappingURL=toolbar.js.map