/**
 * MultiStateRadio component
 * A configurable multi-state selector with click-to-cycle and long-press-for-dropdown behavior
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../utils/cn.js';
import { use_icon } from '../utils/icon_loader.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 renderer component - handles dynamic icon loading
 */
function IconRenderer({ icon_name, icon_set, className, style, }) {
    const Icon = use_icon(icon_name, icon_set);
    if (!Icon) {
        // Fallback placeholder while loading or if icon not found
        return _jsx("span", { className: cn('inline-block rounded-full bg-current', className), style: style });
    }
    return _jsx(Icon, { className: className, style: style });
}
/**
 * Dropdown option item
 */
function DropdownOption({ option, is_selected, icon_set, size, onClick, }) {
    const icon_name = is_selected ? option.icon_selected : (option.icon_unselected || option.icon_selected);
    const size_config = SIZE_CONFIG[size];
    // Determine color styling
    const color_style = {};
    if (option.color) {
        if (option.color.startsWith('#') || option.color.startsWith('rgb')) {
            color_style.color = option.color;
        }
    }
    return (_jsxs("button", { type: "button", onClick: onClick, className: cn('cls_multi_state_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(IconRenderer, { icon_name: icon_name, icon_set: icon_set, className: cn(size_config.icon, !option.color?.startsWith('#') && option.color), style: color_style }) }), _jsx("span", { className: "text-sm", children: option.label }), is_selected && (_jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(current)" }))] }));
}
/**
 * MultiStateRadio component
 * Provides a button that cycles through states on click and shows a dropdown on long-press
 */
export function MultiStateRadio({ data, value, onChange, icon_set = 'io5', selection = 'single', bgcolor = 'bg-muted', fgcolor = 'text-foreground', interaction_mode = 'click-cycle', long_press_ms = 500, disabled = false, size = 'md', className, 'aria-label': ariaLabel, borderless = false, }) {
    // 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);
    // Load Popover components
    React.useEffect(() => {
        if (interaction_mode === 'click-only') {
            return; // Don't load popover if not needed
        }
        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('[MultiStateRadio] Error loading Popover:', error);
            }
        };
        loadComponents();
    }, [interaction_mode]);
    // Get current option
    const current_option = data.find((opt) => opt.value === value) || data[0];
    const current_index = data.findIndex((opt) => opt.value === value);
    // Get size config
    const size_config = SIZE_CONFIG[size];
    /**
     * Cycle to next state
     */
    const cycle_to_next = React.useCallback(() => {
        if (disabled || data.length === 0)
            return;
        const next_index = (current_index + 1) % data.length;
        onChange(data[next_index].value);
    }, [current_index, data, disabled, onChange]);
    /**
     * Handle press start (mousedown/touchstart)
     */
    const handle_press_start = React.useCallback(() => {
        if (disabled)
            return;
        press_start_ref.current = Date.now();
        is_long_press_ref.current = false;
        // Only set up long-press timer if dropdown is supported
        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 (mouseup/touchend)
     */
    const handle_press_end = React.useCallback(() => {
        // Clear long-press timer
        if (long_press_timer_ref.current) {
            clearTimeout(long_press_timer_ref.current);
            long_press_timer_ref.current = null;
        }
        // If it was a long press, popover is already open - don't cycle
        if (is_long_press_ref.current) {
            return;
        }
        // Handle click based on interaction mode
        if (interaction_mode === 'dropdown-only') {
            // Open dropdown on any click
            if (PopoverComponents) {
                set_popover_open(true);
            }
        }
        else {
            // Cycle to next state
            cycle_to_next();
        }
    }, [interaction_mode, PopoverComponents, cycle_to_next]);
    /**
     * Handle press cancel (mouseleave while pressing)
     */
    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 dropdown option selection
     */
    const handle_option_select = React.useCallback((option_value) => {
        onChange(option_value);
        set_popover_open(false);
    }, [onChange]);
    // Determine icon and colors
    const current_icon = current_option?.icon_selected;
    const current_color = current_option?.color || fgcolor;
    const current_bgcolor = current_option?.bgcolor || bgcolor;
    // Build color styles
    const icon_style = {};
    const button_style = {};
    if (current_color.startsWith('#') || current_color.startsWith('rgb')) {
        icon_style.color = current_color;
    }
    if (current_bgcolor.startsWith('#') || current_bgcolor.startsWith('rgb')) {
        button_style.backgroundColor = current_bgcolor;
    }
    // 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_multi_state_radio flex items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', !borderless && 'border border-input', size_config.button, !current_bgcolor.startsWith('#') && current_bgcolor, !disabled && 'hover:bg-accent hover:text-accent-foreground', className), style: button_style, "aria-label": ariaLabel || `${current_option?.label || 'Select state'} - click to cycle, hold for options`, title: `${current_option?.label || 'Select state'} - click to cycle, hold for options`, children: _jsx(IconRenderer, { icon_name: current_icon, icon_set: icon_set, className: cn(size_config.icon, !current_color.startsWith('#') && current_color), style: icon_style }) }));
    // If no popover components 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_multi_state_dropdown w-48 p-0", align: "end", side: "bottom", sideOffset: 5, children: _jsx("div", { className: "cls_multi_state_dropdown_content py-1", children: data.map((option) => (_jsx(DropdownOption, { option: option, is_selected: option.value === value, icon_set: icon_set, size: size, onClick: () => handle_option_select(option.value) }, option.value))) }) })] }));
}
MultiStateRadio.displayName = 'MultiStateRadio';
//# sourceMappingURL=multi_state_radio.js.map