import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, SkeletonCircle, SkeletonGroup, SkeletonLine, } from '@wix/design-system';
import { PickerEmptyStateContainer } from '../PickerEmptyState/PickerEmptyStateContainer';
function _Picker(props) {
    const { state, renderEmptyState, renderError, dataHook, children, flex, hasFilterDropdown, } = props;
    const { collection, minContentHeight } = state;
    const { showRefreshLoader, result: { status, isEmptyAndNotFetching }, } = collection;
    let child;
    if (status.isIdle || showRefreshLoader) {
        // the loader container should be according to the last number of items height (`contentHeight`)
        child = (React.createElement(SkeletonGroup, null,
            React.createElement(Box, { direction: "vertical", width: "100%", minHeight: minContentHeight, dataHook: "search-loader", gap: "0" }, Array.from({ length: 8 }).map((_, index) => (React.createElement(React.Fragment, null,
                React.createElement(Box, { key: index, direction: "horizontal", gap: "24px", padding: "12px 24px", align: "center", verticalAlign: "middle", justifyItems: "center" },
                    React.createElement(SkeletonCircle, { diameter: "48px" }),
                    React.createElement(Box, { direction: "vertical", gap: "6px", flex: "1" },
                        React.createElement(SkeletonLine, { width: "120px" }),
                        React.createElement(SkeletonLine, { width: "240px" })))))))));
    }
    else if (status.isError) {
        child = renderError({
            err: status.error,
            isOnline: collection.isOnline(),
        });
        child = (React.createElement(Box, { align: "center", verticalAlign: "middle", paddingTop: "SP2", paddingBottom: "SP9", height: "100%", minHeight: minContentHeight }, child));
        child = (React.createElement(Box, { direction: "vertical", overflow: "auto" }, child));
    }
    else if (isEmptyAndNotFetching) {
        child = (React.createElement(PickerEmptyStateContainer, { state: state, hasFilterDropdown: hasFilterDropdown, renderEmptyState: renderEmptyState }));
    }
    else {
        child = (React.createElement(Box, { minHeight: minContentHeight, direction: "vertical" }, children));
    }
    return (React.createElement(Box, { dataHook: dataHook, direction: "vertical", overflow: "hidden", flex: flex }, child));
}
export const Picker = observer(_Picker);
//# sourceMappingURL=Picker.js.map