import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CounterTag, Wrapper } from './styles';
import { Tag } from './Tag';
import { useLogic } from './useLogic';
import { getKey } from './utils';
/**
 * Предназначен для отображения списка тегов в таких компонентах как: Select, Autocomplete, TreeLikeAutocomplete
 * Не предназначен для использования в продуктах, не экспортируется из пакета
 */
export const TagsList = (props) => {
    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = useLogic(props);
    const { className, keyId, isDisabled, onClick, getOptionLabel } = props;
    return (_jsxs(Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option) => {
                const tagProps = getTagProps(option);
                return (_jsx(Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, getKey(option, keyId, getOptionLabel)));
            }), showCounter && (_jsx(CounterTag, { isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: onClick }, "more"))] }));
};
