/**
 * @module components/Facet
 */
import cx from 'classnames';
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import Component from 'components/Facet/Component';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import styles from 'components/Facet/styles.css';
export default ({ theme = styles, item, config: _config, isMobile, isHorizontal, onToggle, openFacets, }) => {
    const { current: config } = useRef(_config.merge(_config.getIn(['facets', 'filters', item.get('name')])));
    const selectedItemsCount = useMemo(() => item.get('values').filter((item) => item.get('selected')).size, [item]);
    const title = config.get('label') || item.get('name');
    const isOpen = openFacets.includes(item.get('name'));
    const onClick = useCallback(() => {
        onToggle(item.get('name'));
    }, []);
    useEffect(() => {
        window.dispatchEvent(new Event('resize'));
    }, [isOpen]);
    return (<div className={cx(theme.root, {
        [theme.horizontal]: isHorizontal,
        [theme.mobile]: isMobile,
        [theme.expanded]: isOpen,
    })}>
      <Button className={theme.title} onClick={onClick} aria-expanded={isOpen} aria-controls={`facet-${item.get('name')}`} tabIndex={0}>
        <Text primary uppercase className={theme.text}>
          {title} {selectedItemsCount ? `(${selectedItemsCount})` : ''}
        </Text>
        <Icon name={isOpen ? 'Minus' : 'Plus'} className={theme.icon} title={isOpen ? 'Collapse list' : 'Expand list'}/>
      </Button>
      <div className={theme.body} hidden={!isOpen}>
        <Component facet={item} config={config} isMobile={isMobile}/>
      </div>
    </div>);
};