/**
 * @module components/search/MobileFacets
 */
import MapArray from 'components/common/MapArray';
import Button from 'components/Button';
import Text from 'components/Text';
import { List } from 'immutable';
import { useCallback, useMemo } from 'react';
const FacetLabel = ({ item, theme, selectFacet, config }) => {
    const [isTextFacet, selectedValues] = useMemo(() => [
        item && ['category', 'text'].includes(item.get('type')),
        (item && item.get('values').filter((item) => item.get('selected'))) ||
            List(),
    ], [item]);
    const onClick = useCallback(() => {
        selectFacet(item.get('name'));
    }, [item]);
    return (<Button raw className={theme.facetTitle} onClick={onClick}>
      <div className={theme.flexFix}>
        <Text primary uppercase inlineBlock>
          {config.getIn(['facets', 'filters', item.get('name'), 'label'], item.get('name'))}
        </Text>
        <Text display-if={isTextFacet} secondary inlineBlock className={theme.selectedValues}>
          {selectedValues.map((item) => item.get('value')).join(', ')}
        </Text>
        <Text display-if={selectedValues.size > 0 && !isTextFacet} className={theme.filterCount} secondary uppercase inlineBlock>
          ({selectedValues.size})
        </Text>
      </div>
    </Button>);
};
const MobileFacetsTitlesView = ({ theme, facets, selectFacet, config, }) => (<MapArray config={config} theme={theme} selectFacet={selectFacet} factory={FacetLabel} array={facets}/>);
export default MobileFacetsTitlesView;