'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Type Tab - Component type selection and type-specific options
 */
import { useCallback } from 'react';
import { HiPencil, HiDocumentText, HiCheckCircle, HiCollection, HiCalendar, HiTable, } from 'react-icons/hi';
import { LuChevronDown } from 'react-icons/lu';
import { COMPONENT_TYPE_META, get_component_type_meta, DEFAULT_DATA_TABLE_CONFIG } from '../../types.js';
import { InputOptionsEditor } from '../type_editors/input_options_editor.js';
import { DataTableEditor } from '../type_editors/data_table_editor.js';
import { Switch } from '../ui/switch.js';
import { cn } from '../../../../utils/cn.js';
import { EditorSection, EditorLabel, SwitchCard, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
// Icon components for each type
const TYPE_ICONS = {
    'HazoCollabFormInputbox': HiPencil,
    'HazoCollabFormTextArea': HiDocumentText,
    'HazoCollabFormCheckbox': HiCheckCircle,
    'HazoCollabFormRadio': HiCollection,
    'HazoCollabFormCombo': LuChevronDown,
    'HazoCollabFormDate': HiCalendar,
    'HazoCollabFormDataTable': HiTable,
};
export function TypeTab({ field, on_update, on_commit, readonly = false }) {
    const current_meta = get_component_type_meta(field.component_type);
    // Handle component type change
    const handle_type_change = useCallback((type) => {
        const updates = { component_type: type };
        // Initialize type-specific properties
        const meta = get_component_type_meta(type);
        if (meta?.supports_options && !field.input_options) {
            updates.input_options = [{ label: 'Option 1', value: 'option_1' }];
        }
        if (meta?.supports_data_table && !field.table_config) {
            updates.table_config = { ...DEFAULT_DATA_TABLE_CONFIG };
        }
        on_update(updates);
        on_commit('Change component type');
    }, [field.input_options, field.table_config, on_update, on_commit]);
    // Handle options update
    const handle_options_change = useCallback((options) => {
        on_update({ input_options: options });
    }, [on_update]);
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.component_type, children: "Component Type" }), _jsx("div", { className: "grid grid-cols-2 gap-2 max-w-2xl", children: COMPONENT_TYPE_META.map((meta) => {
                            const Icon = TYPE_ICONS[meta.type] || HiPencil;
                            const is_selected = field.component_type === meta.type;
                            return (_jsxs("button", { onClick: () => handle_type_change(meta.type), disabled: readonly, className: cn('flex items-start gap-3 p-3 border rounded-lg text-left transition-colors', is_selected
                                    ? 'border-primary bg-primary/5 ring-1 ring-primary'
                                    : 'hover:bg-muted/50', readonly && 'opacity-50 cursor-not-allowed'), children: [_jsx(Icon, { className: cn('w-5 h-5 mt-0.5 shrink-0', is_selected ? 'text-primary' : 'text-muted-foreground') }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: meta.label }), _jsx("div", { className: "text-xs text-muted-foreground", children: meta.description })] })] }, meta.type));
                        }) })] }), current_meta?.supports_options && (_jsx(EditorSection, { children: _jsx(InputOptionsEditor, { options: field.input_options ?? [], on_change: handle_options_change, on_commit: () => on_commit('Update options'), readonly: readonly }) })), current_meta?.supports_date_range && (_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.date_range, children: "Date Picker Options" }), _jsx(SwitchCard, { icon: LABEL_ICONS.date_range, label: "Date Range Mode", description: "Allow selecting a start and end date", children: _jsx(Switch, { checked: field.input_format?.format_guide === 'range', onCheckedChange: (checked) => {
                                on_update({
                                    input_format: checked
                                        ? { ...field.input_format, format_guide: 'range' }
                                        : { ...field.input_format, format_guide: undefined }
                                });
                                on_commit('Toggle date range mode');
                            }, disabled: readonly }) })] })), current_meta?.supports_data_table && (_jsx(EditorSection, { children: _jsx(DataTableEditor, { config: field.table_config ?? DEFAULT_DATA_TABLE_CONFIG, on_change: (config) => on_update({ table_config: config }), on_commit: () => on_commit('Update table configuration'), readonly: readonly }) })), _jsxs(EditorSection, { last: true, children: [_jsx(EditorLabel, { icon: LABEL_ICONS.input_width, children: "Input Width" }), _jsxs("div", { className: "flex gap-2 max-w-lg", children: [_jsx("button", { onClick: () => {
                                    on_update({ input_width: 'auto' });
                                    on_commit('Set width to auto');
                                }, disabled: readonly, className: cn('flex-1 px-3 py-2 border rounded-md text-sm transition-colors', field.input_width !== 'full' ? 'border-primary bg-primary/5' : 'hover:bg-muted/50', readonly && 'opacity-50 cursor-not-allowed'), children: "Auto" }), _jsx("button", { onClick: () => {
                                    on_update({ input_width: 'full' });
                                    on_commit('Set width to full');
                                }, disabled: readonly, className: cn('flex-1 px-3 py-2 border rounded-md text-sm transition-colors', field.input_width === 'full' ? 'border-primary bg-primary/5' : 'hover:bg-muted/50', readonly && 'opacity-50 cursor-not-allowed'), children: "Full Width" })] })] })] }));
}
//# sourceMappingURL=type_tab.js.map