import React, { useCallback, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Text, TextButton, } from '@wix/design-system';
import { CollectionSearch } from '../CollectionSearch';
import { Picker } from '../Picker';
import { CollectionProvider } from '../CollectionContext';
import { BulkSelectionMaxSelectionLabel, reachedMaxSelection, showMaxSelectionLabel, } from '../MaxSelection';
import { MaybeTooltip } from '../MaybeTooltip';
import { SelectAllCheckbox } from './SelectAllCheckbox';
import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
import { PickerContentBaseWrapped, } from './PickerContentBaseWrapped';
import { FilterRenderingContextProvider } from '../FilterRenderingContext';
import { isValidElement } from '../isValidElement';
function _PickerContentItemsSelection(props) {
    const { modalState, primaryButtonProps, renderEmptyState, renderError, state, multiple, customContentButtonText, customContentButtonPrefixIcon, customContentButtonOnClick, customContent, showSelectAllCheckbox, enablePrimaryButton, search, hideSearch, renderPickerContent, customMaxSelectionLabel, renderCustomNotification, filterComponent, showSelectedCount, ...rest } = props;
    const { _customContent } = modalState;
    const { picker } = state;
    const { collection } = picker;
    const { bulkSelect, translate: t, showInitialLoader } = collection;
    const { isEmpty: isSelectEmpty } = bulkSelect;
    useEffect(() => {
        _customContent.value = () => customContent;
    }, []);
    const reachedMax = reachedMaxSelection({
        collection,
        multiple,
    });
    const [filterRenderingContextValue] = useState(() => ({
        location: 'modal',
    }));
    const onCustomContentButtonClick = useCallback(() => {
        state.onCreateNewButtonClick(customContentButtonOnClick);
    }, [customContentButtonOnClick]);
    const renderItem = (item, index) => {
        const renderedItem = props.renderItem(item, index);
        const key = collection.itemKey(item);
        return {
            ...renderedItem,
            disabled: (reachedMax && !collection.bulkSelect.selectedIds.includes(key)) ||
                renderedItem.disabled,
        };
    };
    const searchElement = isValidElement(search) ? (React.cloneElement(search, {
        minWidthPixels: '100%',
    })) : search !== false ? (React.createElement(CollectionSearch, { minWidthPixels: "100%" })) : null;
    const shouldShowSearch = search !== undefined ? search !== false : !hideSearch;
    const resolvedSearchElement = shouldShowSearch ? searchElement : null;
    const renderSideActions = () => {
        if (showSelectAllCheckbox &&
            !showInitialLoader &&
            (multiple === true || multiple === Infinity)) {
            return React.createElement(SelectAllCheckbox, { state: state });
        }
        const shouldShowCustomContentButton = customContent || customContentButtonOnClick;
        if (shouldShowCustomContentButton) {
            return (React.createElement(Box, null,
                React.createElement(MaybeTooltip, { dataHook: "custom-content-button-tooltip", content: reachedMax && t('cairo.picker.createNew.button.tooltip') },
                    React.createElement("div", null,
                        React.createElement(TextButton, { dataHook: "custom-content-button", prefixIcon: customContentButtonPrefixIcon, disabled: reachedMax, onClick: onCustomContentButtonClick }, customContentButtonText ?? t('cairo.picker.createNew.button'))))));
        }
        if (showSelectedCount) {
            return (React.createElement(Text, { dataHook: "cairo-selected-items-count" }, t('cairo.selector.modal.items.selected', {
                total: collection.bulkSelect.selectedCount,
            })));
        }
        return null;
    };
    const renderFiltersComponent = () => {
        return (React.createElement(Box, { gap: "12px" },
            React.createElement(Box, { width: "200px" },
                React.createElement(FilterRenderingContextProvider, { value: filterRenderingContextValue }, filterComponent)),
            resolvedSearchElement && React.createElement(React.Fragment, null, resolvedSearchElement)));
    };
    const showMaxSelection = showMaxSelectionLabel(multiple);
    return (React.createElement(PickerContentBaseWrapped, { secondaryButtonText: t('cairo.cancel.button'), primaryButtonProps: {
            disabled: isSelectEmpty && !enablePrimaryButton,
            ...primaryButtonProps,
            style: {
                ...primaryButtonProps?.style,
            },
        }, sideActions: renderSideActions(), ...rest },
        React.createElement(CollectionProvider, { value: picker.collection },
            (resolvedSearchElement ||
                filterComponent ||
                renderCustomNotification ||
                showMaxSelection) && (React.createElement(Box, { display: "grid", paddingLeft: "SP5", paddingRight: "SP5", paddingBottom: "SP3", paddingTop: rest.showHeaderDivider ? 'SP3' : '3px', gap: "SP3" },
                filterComponent ? renderFiltersComponent() : resolvedSearchElement,
                renderCustomNotification ? (React.createElement("span", { "data-hook": "custom-notification" }, renderCustomNotification({
                    selected: collection.bulkSelect.selectedCount,
                    total: collection.result.total,
                }))) : null,
                showMaxSelection && (React.createElement(BulkSelectionMaxSelectionLabel, { dataHook: "selection-max-label", multiple: multiple, customLabel: customMaxSelectionLabel, t: t, selectedCount: collection.bulkSelect.selectedCount })))),
            React.createElement(MultiCollectionSupportProvider, { value: picker.multi },
                React.createElement(Picker, { dataHook: "picker", state: picker, renderEmptyState: renderEmptyState, renderError: renderError, hasFilterDropdown: !!filterComponent }, renderPickerContent?.({ state, renderItem }))))));
}
export const PickerContentItemsSelection = observer(_PickerContentItemsSelection);
//# sourceMappingURL=PickerContentItemsSelection.js.map