import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import AutoTruncateText from '../AutoTruncateText';
import Typography from '../Typography';
import './ChipWithCount.scss';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import { ffid } from '../../utils/ffID/ffid';
const ChipWithCount = ({ labelsList = [], height = '', }) => {
    const tooltipId = ffid();
    const getRemainingLabels = (_jsx("div", { className: "ff-chip-tooltip", children: labelsList
            .filter((_, index) => index > 0)
            .map((labels, index) => (_jsx(Typography, { as: "div", className: "ff-chip-tooltip-label", children: labels }, `label-${index}-${labels}`))) }));
    return (_jsx(_Fragment, { children: !checkEmpty(labelsList) && (_jsxs("div", { className: "ff-chip-with-count-container", children: [_jsx(Typography, { as: "div", fontWeight: "medium", className: "ff-chip-label", style: height ? { height } : undefined, children: _jsx(AutoTruncateText, { children: labelsList[0] || '' }) }), labelsList.length > 1 && (_jsxs(_Fragment, { children: [_jsxs(Typography, { as: "div", className: "ff-chip-count", "data-tooltip-id": `tooltip-${tooltipId}`, fontWeight: "medium", children: ["+", labelsList.length - 1] }), _jsx("div", { id: `tooltip-${tooltipId}`, className: "ff-chip-tooltip-template", children: _jsx(Typography, { as: "div", children: getRemainingLabels }) })] }))] })) }));
};
export default ChipWithCount;
//# sourceMappingURL=ChipWithCount.js.map