import { Box, TableToolbar } from '@wix/design-system';
import React, { cloneElement, Fragment, isValidElement, useMemo } from 'react';
import { classes, st } from './SearchOrCustomFilter.st.css.js';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { observer } from 'mobx-react-lite';
import { useIsMobile } from '../../hooks/useIsMobile';
import { runInAction } from 'mobx';
import { SEARCH_COLLAPSED_WIDTH, SEARCH_EXPANDED_WIDTH, } from '../../state/Toolbar/toolbarResponsiveConstants';
function _SearchOrCustomFilter(props) {
    const { search: _search, state } = props;
    const { toolbar: { responsive }, } = useToolbarCollectionContext();
    const { search: searchResponsive, responsiveDisabled } = responsive;
    const isMobile = useIsMobile();
    const isSearchExpanded = state._searchExpanded;
    const { search, isExpandable } = useMemo(() => {
        if (!isValidElement(_search)) {
            return {
                search: _search,
                isExpandable: false,
            };
        }
        const element = cloneElement(_search, {
            onExpandTransitionStart: (collapsed) => {
                runInAction(() => {
                    if (!collapsed) {
                        state._searchExpanded = true;
                    }
                });
            },
            onExpandTransitionEnd: (collapsed) => {
                runInAction(() => {
                    if (collapsed) {
                        state._searchExpanded = false;
                    }
                });
            },
        });
        return {
            search: element,
            isExpandable: element.props.expandable,
        };
    }, [_search]);
    if (responsiveDisabled || isMobile) {
        let child = search;
        if (isMobile) {
            child = (React.createElement(Fragment, null,
                isMobile && isValidElement(_search) && (React.createElement(Box, { visibility: "hidden" }, cloneElement(_search, {
                    dataHook: `collection-search-mobile-measurement`,
                    // bypass stateful behavior on mobile for measurement
                    value: '',
                    onChange: () => { },
                }))),
                React.createElement(Box, { className: st(classes.searchMobile, {
                        expandable: isExpandable,
                        expanded: isSearchExpanded,
                    }) }, search)));
        }
        return (React.createElement(TableToolbar.Item, { className: st(isMobile ? undefined : classes.search) }, child));
    }
    const shouldShrink = searchResponsive._shouldShrink;
    const width = shouldShrink ? SEARCH_COLLAPSED_WIDTH : SEARCH_EXPANDED_WIDTH;
    return (React.createElement(Box, { direction: "horizontal", width: `${width}px` },
        React.createElement(Box, { width: `${width}px` }, search)));
}
export const SearchOrCustomFilter = observer(_SearchOrCustomFilter);
//# sourceMappingURL=SearchOrCustomFilter.js.map