import { MultiSelect, } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useFilterRenderingContext } from '../FilterRenderingContext';
import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
import { useDropdownTranslationContext } from '../../providers';
const inputSizeToTagSize = {
    tiny: 'tiny',
    small: 'tiny',
    medium: 'small',
    large: 'medium',
};
function _MultiSelectCheckboxFilterBase(props) {
    const { renderTag, filter, dropdownSelect, onSelect, onRemoveTag, size, popoverProps, ...rest } = props;
    const { location } = useFilterRenderingContext();
    const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
        popoverProps,
    });
    const effectiveSize = size || (location === 'panel' ? 'small' : 'medium');
    const { select: { selectedValues }, } = dropdownSelect;
    const { translate } = useDropdownTranslationContext();
    const tags = selectedValues.map((keyedItem) => {
        const { key, item } = keyedItem;
        const tag = renderTag?.(item) ?? {};
        return {
            id: key,
            label: filter.itemName(item),
            size: inputSizeToTagSize[effectiveSize],
            ...tag,
        };
    });
    return (React.createElement(MultiSelect, { inputRef: (ref) => {
            inputRef.current = ref;
        }, dataHook: `collection-filter-${filter.name}`, border: "round", placeholder: translate('placeholder'), tags: tags, size: size, onClose: () => {
            dropdownSelect.close();
        }, onSelect: (option) => {
            const { keyedItem } = option;
            dropdownSelect.set(keyedItem);
            onSelect?.(option);
        }, onRemoveTag: (tagId) => {
            dropdownSelect.deleteKey(tagId);
            onRemoveTag?.(tagId);
        }, popoverProps: windowFlipPopoverProps, ...rest }));
}
export const MultiSelectFilterBase = observer(_MultiSelectCheckboxFilterBase);
//# sourceMappingURL=MultiSelectFilterBase.js.map