import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { useCollectionReachBottom } from '../useCollectionReachBottom';
import { Box } from '@wix/design-system';
import { InfiniteScrollLoader } from '../InfiniteScrollLoader/InfiniteScrollLoader';
import { TransitionGroup } from 'react-transition-group';
import { useIsScrollTop } from '../../hooks/useIsScrollTop';
import { Fade } from '../Fade';
function _PickerListContent(props) {
    const { state, renderItem, spacing = 30, multiple, ...rest } = props;
    const { collection } = state;
    const { result: { keyedItems }, } = collection;
    const scrollRef = useRef(null);
    const { targetRef } = useCollectionReachBottom({
        collection,
        containerRef: scrollRef,
    });
    const isScrollTop = useIsScrollTop(scrollRef);
    useEffect(() => {
        state.updateIsScrollTop(isScrollTop);
    }, [isScrollTop]);
    const listItems = keyedItems.map((keyedItem, index) => {
        const { type: PickerListItem, props: pickerListItemProps } = renderItem(keyedItem, index);
        return (React.createElement(PickerListItem, { dataHook: "selector-list-selector", key: keyedItem.key, keyedItem: keyedItem, state: state, multiple: multiple, ...pickerListItemProps }));
    });
    return (React.createElement("div", { ref: scrollRef, ...rest, "data-hook": "selector-list-content", style: {
            height: 'inherit',
            overflow: 'auto',
            ...rest.style,
        } },
        React.createElement(TransitionGroup, null, listItems.flatMap((child, index, { length }) => {
            return (React.createElement(Fade, { key: child.key, timeout: 300 },
                React.createElement(Box, { direction: "vertical", dataHook: "picker-list-fade-item" },
                    child,
                    index !== length - 1 && (React.createElement(Box, { paddingLeft: "SP5", paddingRight: "SP5" },
                        React.createElement(Box, { width: "100%", height: "1px", backgroundColor: "D60" }))))));
        })),
        React.createElement(InfiniteScrollLoader, { targetRef: targetRef, state: collection, size: "small" })));
}
export const PickerListContent = observer(_PickerListContent);
//# sourceMappingURL=PickerListContent.js.map