/**
 * Collaboration form combobox component
 * Provides a reusable combobox field with label, error message, and chat icon functionality
 *
 * NOTE: This component requires shadcn/ui Popover and Command components to be installed
 * in the consuming application. Install them with:
 * npx shadcn@latest add popover command
 *
 * Also requires lucide-react for icons (Check, ChevronsUpDown)
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import { cn } from '../utils/cn.js';
import { use_logger } from '../logger/context.js';
import { CollabFormFieldContainer, CollabFormFieldLabel, CollabFormFieldError, CollabFormFieldReferenceTag, CollabFormFileUploadSection, } from './hazo_collab_form_base.js';
import { BaseFieldLayout } from './shared/base_field_layout.js';
import { use_base_form_field } from './shared/use_base_form_field.js';
/**
 * Collaboration form combobox component
 * Displays a labeled combobox field with error message and chat icon
 */
export const HazoCollabFormCombo = React.forwardRef((props, ref) => {
    const base = use_base_form_field(props, ref);
    if (base.should_hide)
        return null;
    const { options, value, onChange, field_validator, placeholder = 'Select an option...', search_placeholder = 'Search...', empty_message = 'No option found.', enable_search = false, combo_wrapper_class_name, button_class_name, } = props;
    const logger = use_logger();
    const [open, set_open] = useState(false);
    // Dynamic imports for shadcn components
    const [Components, setComponents] = React.useState(null);
    const [is_loading, set_is_loading] = React.useState(true);
    useEffect(() => {
        const loadComponents = async () => {
            try {
                set_is_loading(true);
                const popoverModule = await import('hazo_ui').catch(() => null);
                const commandModule = await import('hazo_ui').catch(() => null);
                const lucideModule = await import('lucide-react').catch(() => null);
                if (popoverModule && commandModule && lucideModule) {
                    setComponents({
                        Popover: popoverModule.Popover,
                        PopoverTrigger: popoverModule.PopoverTrigger,
                        PopoverContent: popoverModule.PopoverContent,
                        Command: commandModule.ShadcnCommand,
                        CommandInput: commandModule.ShadcnCommandInput,
                        CommandList: commandModule.ShadcnCommandList,
                        CommandEmpty: commandModule.ShadcnCommandEmpty,
                        CommandGroup: commandModule.ShadcnCommandGroup,
                        CommandItem: commandModule.ShadcnCommandItem,
                        Check: lucideModule.Check,
                        ChevronsUpDown: lucideModule.ChevronsUpDown,
                    });
                }
                else {
                    logger.warn('[HazoCollabFormCombo] shadcn components not found', {
                        required: ['popover', 'command', 'lucide-react'],
                        install_command: 'npx shadcn@latest add popover command && npm install lucide-react',
                    });
                }
            }
            catch (error) {
                logger.warn('[HazoCollabFormCombo] Error loading components', {
                    error: error instanceof Error ? error.message : String(error),
                });
            }
            finally {
                set_is_loading(false);
            }
        };
        loadComponents();
    }, []);
    /**
     * Handle option selection by value with validation
     */
    const handle_select_by_value = React.useCallback((selected_value) => {
        const new_value = selected_value === value ? '' : selected_value;
        if (field_validator) {
            base.set_validation_error(field_validator(new_value));
        }
        onChange(new_value);
        set_open(false);
    }, [value, onChange, field_validator, base.set_validation_error]);
    /**
     * Handle option selection by label (fallback)
     */
    const handle_select_by_label = React.useCallback((selected_label) => {
        const matching_option = options.find((opt) => opt.label === selected_label);
        if (matching_option) {
            handle_select_by_value(matching_option.value);
        }
    }, [options, handle_select_by_value]);
    const selected_label = value
        ? options.find((option) => option.value === value)?.label || placeholder
        : placeholder;
    // Show loading state while components are loading
    if (is_loading) {
        return (_jsxs(CollabFormFieldContainer, { ...base.container_props, children: [_jsx(CollabFormFieldLabel, { ...base.label_props }), _jsx("div", { className: cn('cls_collab_combo_wrapper flex items-center gap-2', combo_wrapper_class_name), suppressHydrationWarning: true, children: _jsx("div", { className: cn(base.field_width_class_name || 'flex-1', base.field_width_class_name && 'flex-shrink-0'), children: _jsx("div", { className: cn('w-full h-9 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm md:text-sm flex items-center', base.display_error && 'border-destructive', button_class_name), children: _jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) }) }) }), _jsx(CollabFormFieldReferenceTag, { ...base.reference_tag_props }), _jsx(CollabFormFieldError, { ...base.error_props }), _jsx(CollabFormFileUploadSection, { ...base.file_upload_props })] }));
    }
    // Fallback UI if components failed to load
    if (!Components) {
        return (_jsxs(CollabFormFieldContainer, { ...base.container_props, children: [_jsx(CollabFormFieldLabel, { ...base.label_props }), _jsx("div", { className: cn('cls_collab_combo_wrapper flex items-center gap-2', combo_wrapper_class_name), suppressHydrationWarning: true, children: _jsx("div", { className: cn(base.field_width_class_name || 'flex-1', base.field_width_class_name && 'flex-shrink-0'), children: _jsxs("div", { className: "w-full rounded-md border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [_jsx("div", { className: "font-medium", children: "Missing shadcn/ui components" }), _jsxs("div", { className: "mt-1 text-xs opacity-90", children: ["Run: ", _jsx("code", { className: "bg-destructive/20 px-1 rounded", children: "npx hazo-collab-forms-setup --combo" })] }), _jsxs("div", { className: "mt-1 text-xs opacity-70", children: ["Or manually: ", _jsx("code", { className: "bg-destructive/20 px-1 rounded", children: "npx shadcn@latest add popover command" })] })] }) }) }), _jsx(CollabFormFieldReferenceTag, { ...base.reference_tag_props }), _jsx(CollabFormFieldError, { ...base.error_props }), _jsx(CollabFormFileUploadSection, { ...base.file_upload_props })] }));
    }
    const { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Check, ChevronsUpDown, } = Components;
    return (_jsx(BaseFieldLayout, { base: base, wrapper_class_name: "cls_collab_combo_wrapper", wrapper_extra_class_name: combo_wrapper_class_name, children: _jsxs(Popover, { open: open, onOpenChange: set_open, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: base.component_ref, type: "button", role: "combobox", "aria-expanded": open, "aria-controls": `${base.field_id_final}-combobox`, disabled: base.is_field_disabled, className: cn('cls_collab_combo_button w-full h-9 justify-between rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm flex items-center', base.display_error && 'border-destructive focus-visible:ring-destructive', base.locked && 'bg-slate-100', base.skipped && 'bg-slate-100 opacity-60', base.show_required_highlight && 'bg-red-50', button_class_name), "aria-invalid": base.display_error ? 'true' : 'false', "aria-describedby": base.display_error ? `${base.field_id_final}-error` : undefined, children: [_jsx("span", { className: cn('truncate', !value && 'text-muted-foreground'), children: selected_label }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "min-w-[var(--radix-popover-trigger-width)] w-auto p-0", align: "start", id: `${base.field_id_final}-combobox`, children: _jsxs(Command, { children: [enable_search && (_jsx(CommandInput, { placeholder: search_placeholder, className: "h-9" })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: empty_message }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [option.label], onSelect: (currentValue) => {
                                                logger.debug('[HazoCollabFormCombo] onSelect called', { value: currentValue });
                                                handle_select_by_value(currentValue);
                                            }, onClick: (e) => {
                                                e.preventDefault();
                                                e.stopPropagation();
                                                logger.debug('[HazoCollabFormCombo] onClick called', { value: option.value });
                                                handle_select_by_value(option.value);
                                            }, className: "cursor-pointer", style: { pointerEvents: 'auto', cursor: 'pointer' }, children: [_jsx(Check, { className: cn('mr-2 h-4 w-4', value === option.value ? 'opacity-100' : 'opacity-0') }), option.label] }, option.value))) })] })] }) })] }) }));
});
HazoCollabFormCombo.displayName = 'HazoCollabFormCombo';
//# sourceMappingURL=hazo_collab_form_combo.js.map