import { jsx, jsxs } from 'react/jsx-runtime';
import { useCallback, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { useWheelPicker } from './useWheelPicker.js';
import { timePickerTheme } from './TimePicker.theme.js';

/**
 * WheelColumn Component - iOS-style scroll wheel column
 *
 * Features:
 * - CSS scroll-snap for native snapping behavior
 * - Momentum scrolling with -webkit-overflow-scrolling: touch
 * - Click-to-select items
 * - Mouse drag-to-scroll on desktop
 * - Fade effect using CSS mask-image gradient
 * - Center highlight row with fixed positioning
 */
const WheelColumn = ({ label, options, value, onChange, itemHeight = 40, visibleItems = 5, theme = {}, }) => {
    const mergedTheme = { ...timePickerTheme, ...theme };
    // Use wheel picker hook for scroll behavior
    const { containerRef, scrollToValue, paddingY, currentIndex, isDragging } = useWheelPicker({
        options,
        value,
        onChange,
        itemHeight,
        visibleItems,
    });
    // Handle clicking an item to select it (scroll to it, onChange fires on scroll end)
    const handleItemClick = useCallback((option) => {
        // Don't treat a drag release as a click
        if (isDragging)
            return;
        scrollToValue(option);
    }, [scrollToValue, isDragging]);
    // Calculate container height
    const containerHeight = itemHeight * visibleItems;
    // Format value for display (pad numbers with leading zeros)
    const formatValue = (val) => {
        if (typeof val === 'number') {
            return val.toString().padStart(2, '0');
        }
        return val;
    };
    // Memoize options list to prevent unnecessary re-renders
    const optionElements = useMemo(() => {
        return options.map((option, index) => {
            const isActive = index === currentIndex;
            return (jsx("div", { className: cn(mergedTheme.wheelItemStyle, isActive && mergedTheme.wheelItemActiveStyle, 'snap-center'), style: {
                    height: itemHeight,
                    minHeight: itemHeight,
                }, role: "option", "aria-selected": isActive, "data-value": option, onClick: () => handleItemClick(option), children: formatValue(option) }, `${option}-${index}`));
        });
    }, [options, currentIndex, mergedTheme, itemHeight, handleItemClick]);
    return (jsxs("div", { className: cn(mergedTheme.wheelColumnStyle), role: "listbox", "aria-label": label, children: [jsx("div", { className: cn(mergedTheme.wheelHeaderStyle), children: label || '\u00A0' }), jsxs("div", { className: "relative flex-1", style: { height: containerHeight }, children: [jsx("div", { className: cn(mergedTheme.wheelHighlightStyle), style: {
                            top: paddingY,
                            height: itemHeight,
                        }, "aria-hidden": "true" }), jsx("div", { ref: containerRef, className: cn('absolute inset-0 overflow-y-auto scrollbar-hide', 
                        // CSS scroll snap for native snapping
                        'snap-y snap-mandatory', 
                        // iOS momentum scrolling
                        'overscroll-contain'), style: {
                            paddingTop: paddingY,
                            paddingBottom: paddingY,
                            // CSS mask for fade effect at edges
                            maskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)',
                            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)',
                            // iOS smooth scrolling
                            WebkitOverflowScrolling: 'touch',
                            // Hide scrollbar
                            scrollbarWidth: 'none',
                            msOverflowStyle: 'none',
                        }, tabIndex: 0, onKeyDown: (e) => {
                            if (e.key === 'ArrowUp') {
                                e.preventDefault();
                                const newIndex = Math.max(0, currentIndex - 1);
                                onChange(options[newIndex]);
                            }
                            else if (e.key === 'ArrowDown') {
                                e.preventDefault();
                                const newIndex = Math.min(options.length - 1, currentIndex + 1);
                                onChange(options[newIndex]);
                            }
                        }, children: optionElements })] })] }));
};
WheelColumn.displayName = 'WheelColumn';

export { WheelColumn };
