'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Field Editor component - Right panel with tabbed property editor
 * Updated for multi-section support
 */
import React, { useCallback } from 'react';
import { useTemplateGenerator } from '../context.js';
import { BasicTab } from './tabs/basic_tab.js';
import { TypeTab } from './tabs/type_tab.js';
import { ValidationTab } from './tabs/validation_tab.js';
import { ControlsTab } from './tabs/controls_tab.js';
import { ConditionalTab } from './tabs/conditional_tab.js';
import { IconsBehaviourTab } from './tabs/icons_behaviour_tab.js';
import { SectionTab } from './tabs/section_tab.js';
import { is_section_path, parse_path } from '../utils/template_utils.js';
import { cn } from '../../../utils/cn.js';
import { EditorHeader, EditorTabs } from '../../shared/editor_theme/index.js';
export function FieldEditor({ readonly = false, show_controls_tab = false }) {
    const { state, actions } = useTemplateGenerator();
    const [active_tab, set_active_tab] = React.useState('basic');
    // Check if selected item is a section (path format: "s0", "s1", etc.)
    const is_section = state.selected_path ? is_section_path(state.selected_path) : false;
    // Get section if it's a section path
    const selected_section = is_section && state.selected_path
        ? (() => {
            const { section_index } = parse_path(state.selected_path);
            return state.sections[section_index];
        })()
        : null;
    // Get field config (for non-section items)
    const selected_field = !is_section ? state.selected_item?.node.field_config : null;
    // Handle field updates
    const handle_update = useCallback((updates) => {
        if (state.selected_path && !is_section) {
            actions.update_field(state.selected_path, updates);
        }
    }, [state.selected_path, is_section, actions]);
    // Handle section updates
    const handle_section_update = useCallback((updates) => {
        if (state.selected_path && is_section) {
            const { section_index } = parse_path(state.selected_path);
            actions.update_section(section_index, updates);
        }
    }, [state.selected_path, is_section, actions]);
    // Commit changes to history
    const handle_commit = useCallback((description) => {
        actions.push_history(description ?? 'Update field');
    }, [actions]);
    const is_group = selected_field?.field_type === 'group';
    // Tab configuration
    const tabs = React.useMemo(() => [
        { id: 'section', label: 'Section', icon: 'section', show: is_section },
        { id: 'basic', label: 'Basic', icon: 'basic', show: !is_section },
        { id: 'type', label: 'Type', icon: 'type', show: !is_section && !is_group },
        { id: 'validation', label: 'Validation', icon: 'validation', show: !is_section && !is_group },
        { id: 'controls', label: 'Controls', icon: 'controls', show: show_controls_tab && !is_section },
        { id: 'icons_behaviour', label: 'Icons Behaviour', icon: 'icons_behaviour', show: is_section },
        { id: 'conditional', label: 'Conditional', icon: 'conditional', show: !is_section },
    ].filter(tab => tab.show), [is_group, is_section, show_controls_tab]);
    // Reset to first available tab if current tab is not available
    React.useEffect(() => {
        const tab_exists = tabs.some(tab => tab.id === active_tab);
        if (!tab_exists && tabs.length > 0) {
            set_active_tab(tabs[0].id);
        }
    }, [tabs, active_tab]);
    // Show empty state if nothing selected
    if (!selected_field && !selected_section) {
        return (_jsx("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg", children: "No item selected" }), _jsx("p", { className: "text-sm mt-2", children: "Select a section, group, or field from the tree to edit its properties" })] }) }));
    }
    // Get errors for this item
    const field_errors = state.validation_errors.filter(e => e.field_path === state.selected_path);
    // Determine display values
    const item_label = is_section
        ? (selected_section?.section_name || 'Untitled Section')
        : (selected_field?.label || 'Untitled');
    const item_type = is_section
        ? 'Section'
        : (is_group ? 'Group' : 'Field');
    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs(EditorHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('px-2 py-0.5 rounded text-xs font-medium', is_section ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300' :
                                    is_group ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300' :
                                        'bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300'), children: item_type }), _jsxs("h2", { className: "text-lg font-semibold flex-1 truncate", children: [item_label, !is_section && selected_field?.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })] }), _jsx("div", { className: "flex items-center gap-3 mt-1 text-xs text-muted-foreground", children: is_section ? (_jsxs("span", { children: ["Path: ", _jsx("code", { className: "bg-muted px-1 rounded font-mono", children: state.selected_path })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: ["ID: ", _jsx("code", { className: "bg-muted px-1 rounded font-mono", children: selected_field?.id || '(not set)' })] }), selected_field?.component_type && !is_group && (_jsx("span", { className: "text-muted-foreground/70", children: selected_field.component_type.replace('HazoCollabForm', '') }))] })) }), field_errors.length > 0 && (_jsx("div", { className: "mt-2 p-2 rounded bg-destructive/10 text-destructive text-sm", children: field_errors.map((error, i) => (_jsx("div", { children: error.message }, i))) }))] }), _jsx(EditorTabs, { tabs: tabs, active_tab: active_tab, on_tab_change: set_active_tab }), _jsxs("div", { className: "flex-1 overflow-auto p-4", children: [active_tab === 'section' && is_section && selected_section && (_jsx(SectionTab, { section: selected_section, on_update: handle_section_update, on_commit: handle_commit, readonly: readonly })), active_tab === 'basic' && !is_section && selected_field && (_jsx(BasicTab, { field: selected_field, on_update: handle_update, on_commit: handle_commit, readonly: readonly })), active_tab === 'type' && !is_section && !is_group && selected_field && (_jsx(TypeTab, { field: selected_field, on_update: handle_update, on_commit: handle_commit, readonly: readonly })), active_tab === 'validation' && !is_section && !is_group && selected_field && (_jsx(ValidationTab, { field: selected_field, on_update: handle_update, on_commit: handle_commit, readonly: readonly })), active_tab === 'controls' && !is_section && selected_field && (_jsx(ControlsTab, { field: selected_field, is_group: is_group, on_update: handle_update, on_commit: handle_commit, readonly: readonly })), active_tab === 'icons_behaviour' && is_section && (_jsx(IconsBehaviourTab, { readonly: readonly })), active_tab === 'conditional' && !is_section && selected_field && (_jsx(ConditionalTab, { field: selected_field, on_update: handle_update, on_commit: handle_commit, readonly: readonly }))] })] }));
}
//# sourceMappingURL=field_editor.js.map