import React, { useEffect, useRef, useState } from 'react';
import Tooltip from '@mui/material/Tooltip';
import { countHiddenItems, getListLabel, getListLabelWidth } from './helpers';
import { useStyles } from './styles';
export var ListLabel = function (_a) {
    var list = _a.list, maxWidth = _a.maxWidth;
    var styles = useStyles();
    var labelRef = useRef(null);
    var _b = useState(0), hiddenItemsCount = _b[0], setHiddenItemsCount = _b[1];
    useEffect(function () {
        setHiddenItemsCount(countHiddenItems(list, labelRef.current));
    }, [list]);
    var listLabel = getListLabel(list);
    var hasHiddenItems = hiddenItemsCount > 0;
    var visibleItemsLabel = hasHiddenItems ? getListLabel(list.slice(0, -hiddenItemsCount)) : listLabel;
    return (React.createElement(Tooltip, { title: hasHiddenItems ? listLabel : '' },
        React.createElement("div", { className: styles.listLabelContainer },
            React.createElement("div", { style: { width: getListLabelWidth(maxWidth) }, className: styles.listLabel, ref: labelRef }, listLabel),
            React.createElement("div", { className: styles.visibleItemsLabel }, visibleItemsLabel),
            hasHiddenItems && React.createElement("div", { className: styles.hiddenCount }, "+".concat(hiddenItemsCount)))));
};
