import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from "../../../components/icon/index.js";
import { cn } from "#scalars";
import { CommandItem } from "../../../../scalars/components/fragments/command/index.js";
const renderIcon = (IconComponent) => {
    if (typeof IconComponent === "string") {
        return (_jsx(Icon, { name: IconComponent, size: 16, className: cn("text-gray-700 dark:text-gray-400") }));
    }
    return (IconComponent && (_jsx(IconComponent, { className: cn("size-4", "text-gray-700 dark:text-gray-400") })));
};
export const CommandListItem = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex, }) => {
    return (_jsx(_Fragment, { children: options.map((opt) => {
            const isSelected = selectedValues.includes(opt.value);
            return (_jsxs(CommandItem, { tabIndex: tabIndex, value: opt.label, onSelect: () => !opt.disabled && toggleOption(opt.value), disabled: opt.disabled, className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled &&
                    "!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent"), role: "option", "aria-selected": isSelected, children: [selectionIcon === "auto" &&
                        (multiple ? (_jsx("div", { className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected &&
                                "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"), children: isSelected && _jsx(Icon, { name: "Checkmark", size: 16 }) })) : (_jsx("div", { className: cn("relative size-4 rounded-full border", isSelected
                                ? "border-gray-900 dark:border-gray-400"
                                : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"), children: isSelected && (_jsx("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })) }))), selectionIcon === "checkmark" &&
                        !(selectionIconPosition === "right" && hasAnyIcon) && (_jsx("div", { className: "size-4", children: selectionIconPosition === "left" && isSelected && (_jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" })) })), renderIcon(opt.icon), _jsx("span", { className: cn("flex-1 truncate text-[14px] font-normal leading-4", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"), children: opt.label }), selectionIcon === "checkmark" &&
                        selectionIconPosition === "right" && (_jsx("div", { className: "size-4", children: isSelected && (_jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" })) }))] }, `favorite-${opt.value}`));
        }) }));
};
//# sourceMappingURL=command-list-item.js.map