import { Box, FloatingNotification, SelectorListContent, } from '@wix/design-system';
import React, { useEffect, useMemo } from 'react';
import { addEventListener } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
function _PickerSelectorListContent(props) {
    const { state, renderItem, multiple, spacing = 30, hiddenItemsWarningText, hasAdditionalStep, ...rest } = props;
    const { picker } = state;
    const { collection, someHidden } = picker;
    const { bulkSelect, result: { keyedItems }, fetchedLastPage, } = collection;
    const { checkedSet, indeterminateSet } = bulkSelect;
    useEffect(() => {
        if (hiddenItemsWarningText) {
            picker.setFloatingNotificationHeight();
        }
    }, [hiddenItemsWarningText]);
    useEffect(() => {
        const disposers = [
            addEventListener(bulkSelect.select._map.events, 'isDisabled', (selectionEntry) => {
                const collectionItem = bulkSelect.getCollectionItem(selectionEntry.value.key);
                if (!collectionItem) {
                    return false;
                }
                const { item, index } = collectionItem;
                return renderItem?.(item, index).disabled || false;
            }),
        ];
        return () => {
            disposers.forEach((d) => d());
        };
    }, [renderItem]);
    const items = useMemo(() => keyedItems.map((keyedItem, index) => ({
        id: keyedItem.key,
        title: collection.itemName(keyedItem.item),
        ...renderItem?.(keyedItem.item, index),
        keyedItem,
    })), [keyedItems, renderItem]);
    const notification = someHidden && hiddenItemsWarningText && (React.createElement(Box, { padding: `0 ${spacing}px 18px ${spacing}px` },
        React.createElement(FloatingNotification, { dataHook: "floating-notification", width: "100%", showCloseButton: false, type: "warning", text: hiddenItemsWarningText })));
    return (React.createElement(SelectorListContent, { items: items, infiniteScrollRef: (infiniteScroll) => {
            collection.scrollableContent =
                infiniteScroll?.scrollComponent?.parentElement;
        }, searchValue: "", loadMore: collection.fetchNextPageIfNeeded, topScrollableContent: notification, checkIsSelected: (item) => {
            const { keyedItem } = item;
            return checkedSet.has(keyedItem.key);
        }, checkIndeterminate: (item) => {
            const { keyedItem } = item;
            return indeterminateSet.has(keyedItem.key);
        }, onToggle: (item) => {
            const { keyedItem } = item;
            picker.toggle(keyedItem, {
                clear: !multiple,
                hasAdditionalStep: !multiple && hasAdditionalStep?.({ item: keyedItem.item }),
            });
        }, hasMore: !fetchedLastPage, multiple: multiple, ...rest }));
}
export const PickerSelectorListContent = observer(_PickerSelectorListContent);
//# sourceMappingURL=PickerSelectorListContent.js.map