/**
 * DataOkMultiState component
 * Pre-configured multi-state selector for Data OK use case
 * Provides OK, Not OK, and Pending states with appropriate icons and colors
 * Uses direct icon imports for reliability
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { IoCheckmarkCircle, IoRadioButtonOff } from 'react-icons/io5';
import { cn } from '../utils/cn.js';
/**
 * Size configurations
 */
const SIZE_CONFIG = {
    sm: { button: 'h-7 w-7', icon: 'h-4 w-4' },
    md: { button: 'h-9 w-9', icon: 'h-5 w-5' },
    lg: { button: 'h-11 w-11', icon: 'h-6 w-6' },
};
/**
 * Icon wrapper components with built-in colors
 * These match the DataOkCheckbox styling
 */
const OkIcon = ({ className }) => (_jsx(IoCheckmarkCircle, { className: className, style: { color: '#10b981' } }));
const NotOkIcon = ({ className }) => (_jsx(IoRadioButtonOff, { className: className, style: { color: '#f87171' } }));
const PendingIcon = ({ className }) => (_jsx(IoCheckmarkCircle, { className: className, style: { color: '#f59e0b' } }));
/**
 * Default state configurations
 * Uses same icons as DataOkCheckbox for consistency
 */
const DEFAULT_STATE_CONFIG = {
    ok: {
        label: 'Data OK',
        icon: OkIcon,
    },
    not_ok: {
        label: 'Data Not OK',
        icon: NotOkIcon,
    },
    pending: {
        label: 'Pending Review',
        icon: PendingIcon,
    },
};
/**
 * State order for cycling
 */
const STATE_ORDER = ['ok', 'not_ok', 'pending'];
/**
 * Dropdown option component
 */
function DropdownOption({ state, config, is_selected, size, onClick, }) {
    const size_config = SIZE_CONFIG[size];
    const IconComponent = config.icon;
    const handleClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onClick();
    };
    return (_jsxs("button", { type: "button", onClick: handleClick, onPointerDown: (e) => e.stopPropagation(), className: cn('cls_data_ok_dropdown_option w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-accent', is_selected && 'bg-accent/50'), children: [_jsx("span", { className: cn('flex-shrink-0', size_config.icon), children: _jsx(IconComponent, { className: size_config.icon }) }), _jsx("span", { className: "text-sm", children: config.label }), is_selected && (_jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(current)" }))] }));
}
/**
 * DataOkMultiState component
 * A preset multi-state selector for data validation status
 *
 * @example
 * ```tsx
 * const [status, setStatus] = useState<DataOkState>('pending');
 *
 * <DataOkMultiState
 *   value={status}
 *   onChange={setStatus}
 * />
 * ```
 *
 * @example Custom icons/labels
 * ```tsx
 * <DataOkMultiState
 *   value={status}
 *   onChange={setStatus}
 *   state_config={{
 *     ok: { label: 'Approved' },
 *     pending: { label: 'Under Review' },
 *   }}
 * />
 * ```
 */
export function DataOkMultiState({ value, onChange, disabled = false, size = 'sm', interaction_mode = 'click-cycle', long_press_ms = 500, className, 'aria-label': ariaLabel, state_config, hover_class = 'hover:bg-muted', show_border = true, hidden_states, }) {
    // State for popover
    const [popover_open, set_popover_open] = React.useState(false);
    // Refs for long-press detection
    const press_start_ref = React.useRef(0);
    const long_press_timer_ref = React.useRef(null);
    const is_long_press_ref = React.useRef(false);
    // Dynamic import for shadcn Popover
    const [PopoverComponents, setPopoverComponents] = React.useState(null);
    // Merge custom config with defaults
    const merged_config = React.useMemo(() => {
        const result = { ...DEFAULT_STATE_CONFIG };
        if (state_config) {
            for (const state of STATE_ORDER) {
                if (state_config[state]) {
                    result[state] = { ...result[state], ...state_config[state] };
                }
            }
        }
        return result;
    }, [state_config]);
    // Load Popover components
    React.useEffect(() => {
        if (interaction_mode === 'click-only') {
            return;
        }
        const loadComponents = async () => {
            try {
                const popoverModule = await import('hazo_ui').catch(() => null);
                if (popoverModule) {
                    setPopoverComponents({
                        Popover: popoverModule.Popover,
                        PopoverTrigger: popoverModule.PopoverTrigger,
                        PopoverContent: popoverModule.PopoverContent,
                    });
                }
            }
            catch (error) {
                console.warn('[DataOkMultiState] Error loading Popover:', error);
            }
        };
        loadComponents();
    }, [interaction_mode]);
    // Get current config
    const current_config = merged_config[value];
    const current_index = STATE_ORDER.indexOf(value);
    // Get size config
    const size_config = SIZE_CONFIG[size];
    /**
     * Get states that are selectable (not hidden)
     */
    const get_selectable_states = React.useCallback(() => {
        return STATE_ORDER.filter(s => !hidden_states?.includes(s));
    }, [hidden_states]);
    /**
     * Cycle to next state (skipping hidden states)
     */
    const cycle_to_next = React.useCallback(() => {
        if (disabled)
            return;
        const selectable = get_selectable_states();
        if (selectable.length === 0)
            return; // Safety check
        const selectable_index = selectable.indexOf(value);
        // If current value is hidden, cycle to first selectable
        if (selectable_index === -1) {
            onChange(selectable[0]);
        }
        else {
            onChange(selectable[(selectable_index + 1) % selectable.length]);
        }
    }, [disabled, value, onChange, get_selectable_states]);
    /**
     * Handle press start
     */
    const handle_press_start = React.useCallback(() => {
        if (disabled)
            return;
        press_start_ref.current = Date.now();
        is_long_press_ref.current = false;
        if (interaction_mode !== 'click-only' && PopoverComponents) {
            long_press_timer_ref.current = setTimeout(() => {
                is_long_press_ref.current = true;
                set_popover_open(true);
            }, long_press_ms);
        }
    }, [disabled, interaction_mode, long_press_ms, PopoverComponents]);
    /**
     * Handle press end
     */
    const handle_press_end = React.useCallback(() => {
        if (long_press_timer_ref.current) {
            clearTimeout(long_press_timer_ref.current);
            long_press_timer_ref.current = null;
        }
        if (is_long_press_ref.current) {
            return;
        }
        if (interaction_mode === 'dropdown-only') {
            if (PopoverComponents) {
                set_popover_open(true);
            }
        }
        else {
            cycle_to_next();
        }
    }, [interaction_mode, PopoverComponents, cycle_to_next]);
    /**
     * Handle press cancel
     */
    const handle_press_cancel = React.useCallback(() => {
        if (long_press_timer_ref.current) {
            clearTimeout(long_press_timer_ref.current);
            long_press_timer_ref.current = null;
        }
        is_long_press_ref.current = false;
    }, []);
    /**
     * Handle option select
     */
    const handle_option_select = React.useCallback((state) => {
        onChange(state);
        set_popover_open(false);
    }, [onChange]);
    // Get current icon
    const IconComponent = current_config.icon;
    // Build button content
    const button_content = (_jsx("button", { type: "button", disabled: disabled, onMouseDown: handle_press_start, onMouseUp: handle_press_end, onMouseLeave: handle_press_cancel, onTouchStart: handle_press_start, onTouchEnd: handle_press_end, onTouchCancel: handle_press_cancel, className: cn('cls_data_ok_multi_state flex items-center justify-center rounded-md bg-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', show_border && 'border border-input', size_config.button, !disabled && hover_class, className), "aria-label": ariaLabel || `${current_config.label} - click to cycle, hold for options`, title: `${current_config.label} - click to cycle, hold for options`, children: _jsx(IconComponent, { className: size_config.icon }) }));
    // If no popover or click-only mode, just return the button
    if (!PopoverComponents || interaction_mode === 'click-only') {
        return button_content;
    }
    const { Popover, PopoverTrigger, PopoverContent } = PopoverComponents;
    return (_jsxs(Popover, { open: popover_open, onOpenChange: set_popover_open, children: [_jsx(PopoverTrigger, { asChild: true, children: button_content }), _jsx(PopoverContent, { className: "cls_data_ok_dropdown w-48 p-0", align: "end", side: "bottom", sideOffset: 5, children: _jsx("div", { className: "cls_data_ok_dropdown_content py-1", children: get_selectable_states().map((state) => (_jsx(DropdownOption, { state: state, config: merged_config[state], is_selected: state === value, size: size, onClick: () => handle_option_select(state) }, state))) }) })] }));
}
DataOkMultiState.displayName = 'DataOkMultiState';
/**
 * Utility to convert boolean to DataOkState
 * For backward compatibility with existing data_ok_checked boolean prop
 */
export function boolean_to_data_ok_state(checked) {
    return checked ? 'ok' : 'not_ok';
}
/**
 * Utility to convert DataOkState to boolean
 * For backward compatibility - 'ok' = true, everything else = false
 */
export function data_ok_state_to_boolean(state) {
    return state === 'ok';
}
/**
 * Get the default state configurations
 * Useful if consumers want to see or extend the defaults
 */
export function get_default_state_config() {
    return { ...DEFAULT_STATE_CONFIG };
}
//# sourceMappingURL=data_ok_multi_state.js.map