"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Check, ChevronDown } from "lucide-react";
import { cn } from "../../lib/utils";
import { Button } from "./button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
export function Select({ id, value, onValueChange, options, placeholder = "Select an option", disabled = false, className, loading = false, onLazyLoad, emptyMessage = "No options available", size = "sm", maxWidth, searchable = false, searchPlaceholder = "Search...", "data-testid": dataTestId, }) {
    const [open, setOpen] = React.useState(false);
    const [triggerWidth, setTriggerWidth] = React.useState();
    const triggerRef = React.useRef(null);
    const [portalContainer, setPortalContainer] = React.useState(null);
    const selectedOption = options.find((option) => option.value === value);
    const handleSelect = React.useCallback((selectedValue) => {
        setOpen(false);
        onValueChange?.(selectedValue);
    }, [onValueChange]);
    const handleOpenChange = React.useCallback((newOpen) => {
        if (newOpen && triggerRef.current) {
            setTriggerWidth(triggerRef.current.offsetWidth);
            const dialogContent = triggerRef.current.closest('[data-slot="dialog-content"]');
            setPortalContainer(dialogContent);
        }
        setOpen(newOpen);
        if (newOpen && onLazyLoad) {
            // Defer the lazy load to avoid blocking the UI
            setTimeout(() => onLazyLoad(), 0);
        }
    }, [onLazyLoad]);
    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, ref: triggerRef, variant: "outline", role: "combobox", "aria-expanded": open, size: size, "data-testid": dataTestId, className: cn("focus-shadow w-full justify-between text-xs", "focus-visible:border-neutral-grey-100 aria-expanded:border-neutral-grey-100", !className?.includes("bg-") && "bg-white", !className?.includes("h-") && "h-auto", !className?.includes("min-h-") &&
                        !className?.includes("h-") &&
                        "min-h-8", !className?.includes("py-") && "py-[7px]", !className?.includes("rounded-") && "rounded-[4px]", disabled ? "cursor-not-allowed opacity-50" : "", className), disabled: disabled, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 truncate", children: [selectedOption?.icon && (_jsx("span", { className: "flex h-4 w-5 shrink-0 items-center justify-center overflow-hidden", children: selectedOption.icon })), _jsx("span", { className: "truncate", children: selectedOption
                                        ? selectedOption.label
                                        : loading && value
                                            ? "Loading..."
                                            : placeholder })] }), _jsx(ChevronDown, { className: cn("ml-2 h-4 w-4 shrink-0 text-neutral-grey-100", size === "xs" && "h-3 w-3"), strokeWidth: 1 })] }) }), _jsx(PopoverContent, { className: "p-0 text-xs", align: "start", sideOffset: 4, style: {
                    minWidth: triggerWidth ? `${triggerWidth}px` : undefined,
                    maxWidth: maxWidth || "300px",
                    width: "auto",
                }, container: portalContainer, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsxs(Command, { className: "w-full", children: [searchable && (_jsx(CommandInput, { placeholder: searchPlaceholder, className: "badge-pad h-6 text-[10px]" })), _jsxs(CommandList, { className: "max-h-[300px] w-full", children: [_jsx(CommandEmpty, { children: loading ? "Loading..." : emptyMessage }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [option.label], onSelect: () => handleSelect(option.value), disabled: option.disabled, className: cn("flex items-start justify-between gap-2 p-2", option.className), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [option.icon && (_jsx("span", { className: "mt-0.5 flex h-4 w-5 shrink-0 items-center justify-center overflow-hidden", children: option.icon })), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "font-normal whitespace-normal", children: option.label }), option.description && (_jsx("div", { className: "text-neutral-grey-50 text-[10px] leading-tight whitespace-normal opacity-90", children: option.description }))] })] }), _jsx(Check, { className: cn("mt-0.5 h-4 w-4 shrink-0", value === option.value ? "opacity-100" : "opacity-0"), strokeWidth: 1 })] }, option.value))) })] })] }) })] }));
}
//# sourceMappingURL=select.js.map