import React, { useState } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import CloseIcon from '@mui/icons-material/Close';
import { CollapseButton } from '../CollapseButton';
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
import { withTooltip } from '../HOCs/withTooltip';
import FacetTitle from './components/FacetTitle/FacetTitle';
import RecommendedIcon from '../icons/Recommended';
import styles from './FacetContainer.module.css';
export var RecommendedIconWithTooltip = withTooltip(RecommendedIcon);
export var FacetContainer = function (_a) {
    var _b;
    var children = _a.children, title = _a.title, chipLabel = _a.chipLabel, pathToTitle = _a.pathToTitle, _c = _a.isOpenByDefault, isOpenByDefault = _c === void 0 ? true : _c, _d = _a.isHighlighted, isHighlighted = _d === void 0 ? false : _d, _e = _a.isRecommended, isRecommended = _e === void 0 ? false : _e, onDeleteChip = _a.onDeleteChip, onClose = _a.onClose;
    var _f = useState(isOpenByDefault), open = _f[0], setOpen = _f[1];
    var toggleOpen = function () {
        setOpen(!open);
    };
    return (React.createElement("div", { className: classnames(styles.facetContainer, (_b = {},
            _b[styles.openedFacetContainer] = open,
            _b[styles.closedFacetContainer] = !open,
            _b[styles.highlighted] = isHighlighted,
            _b)), "data-reltio-id": "search-facet-container-".concat(title) },
        React.createElement("div", { className: styles.titleContainer },
            React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Remove'), icon: CloseIcon, onClick: onClose, className: styles.iconButton, size: "XXS" }),
            isRecommended && (React.createElement(RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: i18n.text('Recommended'), showForDisabled: true })),
            React.createElement(FacetTitle, { title: title, pathToTitle: pathToTitle, chipLabel: chipLabel, onDelete: onDeleteChip, onClick: toggleOpen }),
            React.createElement(CollapseButton, { onClick: toggleOpen, isOpen: open, className: styles.iconButton, size: "S", tooltipTitle: open ? i18n.text('Collapse attribute') : i18n.text('Expand attribute'), tooltipPlacement: "bottom-end" })),
        open ? children : null));
};
