import { Revert } from '@wix/wix-ui-icons-common';
import React from 'react';
import { Box, Text, TextButton } from '@wix/design-system';
import { CollectionEmptyStateBase, } from '../CollectionEmptyStateBase';
import { observer } from 'mobx-react-lite';
function _PickerEmptyState(props) {
    const { state, hasFilterDropdown, ...rest } = props;
    const { collection } = state;
    const { result: { hasAvailableItems }, translate: t, } = collection;
    const showFilterOnlyEmptyState = Boolean(hasFilterDropdown && collection.query.search.isEmpty);
    const showFilterWithSearchEmptyState = Boolean(hasFilterDropdown && !collection.query.search.isEmpty);
    const searchOnlyNoResultsStateProps = {
        state: collection,
        dataHook: 'picker-no-results-state',
        title: t('cairo.search.nothingMatches.title', {
            term: collection.result.originQuery.rawSearch,
        }),
        subtitle: (React.createElement(Box, { direction: "vertical", gap: "18px", align: "center" },
            React.createElement(Text, { dataHook: "picker-no-results-state-subtitle", size: "small" }, t('cairo.search.nothingMatches.text')),
            React.createElement(TextButton, { dataHook: "picker-no-results-state-reset-button", prefixIcon: React.createElement(Revert, null), onClick: () => {
                    collection.clearSearch();
                    collection.searchInputRef?.focus();
                } }, t('cairo.emptyState.reset.button')))),
    };
    const filterOnlyEmptyStateProps = {
        state: collection,
        dataHook: 'picker-empty-state-only-filter',
        title: t('cairo.search.noresults.title'),
        subtitle: t('cairo.selectorModal.searchEmptyState.changeFilter.subtitle'),
    };
    const filterWithSearchEmptyStateProps = {
        state: collection,
        dataHook: 'picker-empty-state-filter-with-search',
        title: t('cairo.search.nothingMatches.title', {
            term: collection.result.originQuery.rawSearch,
        }),
        subtitle: (React.createElement(Box, { direction: "vertical", gap: "18px", align: "center" },
            React.createElement(Text, { size: "small", dataHook: "picker-no-results-state-subtitle" }, t('cairo.selectorModal.searchEmptyState.subtitle')),
            React.createElement(TextButton, { dataHook: "picker-no-results-state-reset-button", prefixIcon: React.createElement(Revert, null), onClick: () => {
                    collection.clearSearch();
                    collection.searchInputRef?.focus();
                } }, t('cairo.emptyState.reset.button')))),
    };
    const getEmptyStateConfig = () => {
        if (!hasAvailableItems) {
            return {
                state: collection,
                dataHook: 'picker-empty-state',
            };
        }
        if (showFilterOnlyEmptyState) {
            return filterOnlyEmptyStateProps;
        }
        if (showFilterWithSearchEmptyState) {
            return filterWithSearchEmptyStateProps;
        }
        return searchOnlyNoResultsStateProps;
    };
    return React.createElement(CollectionEmptyStateBase, { ...getEmptyStateConfig(), ...rest });
}
export const PickerEmptyState = observer(_PickerEmptyState);
//# sourceMappingURL=PickerEmptyState.js.map