import React, { useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { Box, Loader, Popover, SelectorList, Tag } from '@wix/design-system';
import { CreateTagButton } from './CreateTagButton';
import { EmptyState } from './EmptyState';
import { Footer } from './Footer';
import { TAG_MAX_LENGTH } from '@wix/bex-core';
import { minimalRequiredWdsRuntimeCheck } from '../../../minimalRequiredWdsRuntimeCheck';
import { AsyncJobProgressModal } from './AsyncJobProgressModal';
export const _BulkAssignTagsPopover = ({ state, popoverElement, }) => {
    const { translate: t } = useWixPatternsContainer();
    const closePopover = useCallback(() => {
        state.closePopover();
    }, [state]);
    const handleItemSelect = useCallback((item) => {
        state.handleItemSelect(item.id);
    }, [state]);
    if (process.env.NODE_ENV !== 'production') {
        minimalRequiredWdsRuntimeCheck({
            required: '^1.76.1',
            requiredBy: 'WixPatterns/BulkAssignTagsPopover',
        });
    }
    const selectorListDataSource = (searchQuery) => {
        state.handleSearchChange(searchQuery);
        const filteredOptions = state.tagOptions.filter((tag) => {
            return tag.name.toLowerCase().includes(searchQuery);
        });
        if (filteredOptions.length === 0 && searchQuery.length > TAG_MAX_LENGTH) {
            const truncatedTag = state.tagOptions.find((tag) => tag.name?.toLowerCase() ===
                searchQuery.substring(0, TAG_MAX_LENGTH).toLowerCase());
            if (truncatedTag) {
                filteredOptions.push(truncatedTag);
            }
        }
        const items = filteredOptions.map((tag, idx) => ({
            id: tag.id,
            title: (React.createElement(Tag, { id: tag.id, removable: false, maxWidth: "198px", dataHook: `bulk-assign-tags-tag-${idx}` }, tag.name)),
            selected: state.assignedWithOptimisticTagIds.includes(tag.id),
            indeterminate: state.indeterminateTagIds.includes(tag.id),
        }));
        return Promise.resolve({
            items,
            totalCount: items.length,
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Popover, { tabIndex: 0, showArrow: true, shown: state.isShown, appendTo: "window", placement: "bottom", width: "304px", onClickOutside: closePopover, onEscPress: closePopover, onTabOut: closePopover, dataHook: "bulk-assign-tags-popover" },
            React.createElement(Popover.Element, null, popoverElement),
            React.createElement(Popover.Content, null,
                React.createElement(Box, { height: "270px", direction: "vertical" },
                    state.isLoading && (React.createElement(Box, { align: "center", verticalAlign: "middle", flex: 1 },
                        React.createElement(Loader, { dataHook: "bulk-assign-tags-loading-state" }))),
                    !state.isLoading && (React.createElement(SelectorList, { autoFocus: true, key: state.tagsManagementState.items.length, dataHook: "bulk-assign-tags-selector-list", dataSource: selectorListDataSource, emptyState: React.createElement(EmptyState, { state: state }), size: "small", searchPlaceholder: state.isInEmptyState
                            ? t('cairo.tags.collectionPage.popover.emptyState.search.placeholder')
                            : t('cairo.tags.collectionPage.popover.search.placeholder'), renderNoResults: (searchValue) => (React.createElement(Box, { padding: "SP2 SP5" },
                            React.createElement(CreateTagButton, { state: state, searchValue: searchValue }))), searchMaxLength: TAG_MAX_LENGTH, multiple: true, onSelect: handleItemSelect, height: "216px" })),
                    React.createElement(Footer, { state: state })))),
        React.createElement(AsyncJobProgressModal, { state: state })));
};
export const BulkAssignTagsPopover = observer(_BulkAssignTagsPopover);
//# sourceMappingURL=BulkAssignTagsPopover.js.map