import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '../../../components/icon/index.js';
import { useCommandState } from 'cmdk';
import { useEffect } from 'react';
import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../../../../scalars/components/fragments/command/index.js';
import { cn } from '../../../../scalars/lib/utils.js';
import { CommandListItem } from './command-list-item.js';
export const Content = ({ searchable, commandListRef, multiple, selectedValues, selectionIcon, selectionIconPosition, options = [], toggleAll, toggleOption, favoriteOptions = [], }) => {
    const enabledOptions = options.filter((opt) => !opt.disabled);
    const hasAnyIcon = options.some((opt) => opt.icon);
    const cmdkSearch = useCommandState((state) => state.search);
    // scroll to top when search change
    useEffect(() => {
        commandListRef.current?.scrollTo({ top: 0, behavior: 'instant' });
    }, [commandListRef, cmdkSearch]);
    return (_jsxs("div", { className: cn('select__content'), children: [searchable && (_jsx(CommandInput, { placeholder: "Search...", onKeyDown: (e) => {
                    const isOptionsRelatedKey = ['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key);
                    if (!(isOptionsRelatedKey && enabledOptions.length > 0)) {
                        e.stopPropagation();
                    }
                }, wrapperClassName: "rounded-t", className: "text-gray-900 dark:text-gray-50 select__search" })), _jsxs(CommandList, { ref: commandListRef, tabIndex: !searchable ? 0 : undefined, className: "select__list", children: [_jsx(CommandEmpty, { className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400", children: "No results found." }), multiple && cmdkSearch === '' && (_jsx(CommandGroup, { className: "pb-0", children: _jsx(CommandItem, { value: "select-all", onSelect: toggleAll, disabled: false, className: cn('cursor-pointer', 'data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900'), role: "option", "aria-selected": selectedValues.length === enabledOptions.length, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [selectionIcon === 'auto' && (_jsx("div", { className: cn('flex size-4 items-center justify-center rounded-md border', 'border-gray-700 dark:border-gray-400', selectedValues.length === enabledOptions.length &&
                                            'bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black'), children: selectedValues.length === enabledOptions.length && _jsx(Icon, { name: "Checkmark", size: 16 }) })), selectionIcon === 'checkmark' && !(selectionIconPosition === 'right' && hasAnyIcon) && (_jsx("div", { className: "size-4", children: selectionIconPosition === 'left' && selectedValues.length === enabledOptions.length && (_jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" })) })), _jsx("span", { className: "text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50", children: selectedValues.length === enabledOptions.length ? 'Deselect All' : 'Select All' }), selectionIcon === 'checkmark' && selectionIconPosition === 'right' && (_jsx("div", { className: "ml-auto size-4", children: selectedValues.length === enabledOptions.length && (_jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" })) }))] }) }) })), _jsxs(CommandGroup, { className: multiple && cmdkSearch === '' ? 'pt-0' : undefined, children: [_jsx(CommandListItem, { options: favoriteOptions, selectedValues: selectedValues, multiple: multiple, selectionIcon: selectionIcon, selectionIconPosition: selectionIconPosition, hasAnyIcon: hasAnyIcon, toggleOption: toggleOption, tabIndex: !searchable ? 0 : undefined, className: "select__list-item-favorite" }), favoriteOptions.length > 0 && _jsx("div", { className: "my-1 border-b border-gray-300 dark:border-gray-600" }), _jsx(CommandListItem, { options: options, selectedValues: selectedValues, multiple: multiple, selectionIcon: selectionIcon, selectionIconPosition: selectionIconPosition, hasAnyIcon: hasAnyIcon, toggleOption: toggleOption, tabIndex: !searchable ? 0 : undefined, className: "select__list-item" })] })] })] }));
};
//# sourceMappingURL=content.js.map