/**
 * @module components/Breadcrumbs
 */
import MapArray from 'components/common/MapArray';
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import { useMemo } from 'react';
const Item = ({ mapping, theme, item, name, config: _config, }) => {
    const [Content, config] = useMemo(() => {
        const facetConfig = _config.getIn(['facets', 'filters', name]);
        const _type = facetConfig?.get('type') || item.get('type');
        return [mapping[_type], _config.merge(facetConfig)];
    }, [mapping]);
    return (<Button className={theme.breadcrumb} onClick={item.toggle}>
      <Text secondary uppercase className={theme.title}>
        <Content item={item} config={config} theme={theme}/>
      </Text>
      <Icon className={theme.cross} name="XDark" title="Remove filter"/>
    </Button>);
};
export default (mapping) => ({ item, theme, config, }) => (<MapArray array={item.get('values')} name={item.get('name')} factory={Item} theme={theme} mapping={mapping} config={config}/>);