/* eslint-disable operator-linebreak */
/* eslint-disable object-curly-newline */
/* eslint-disable arrow-body-style */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/jsx-one-expression-per-line */
// @ts-nocheck
import React, { useRef, useMemo } from "react";
import styled from "styled-components";
import { Flex, TextMicro, Popover } from "@netdata/netdata-ui";
import GroupBox from "./groupBox";
import { getWidth } from "./drawBoxes";
import getAlign from "./getAlign";
const Title = styled.span `
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`;
const Label = styled(Flex).attrs({
    as: TextMicro,
    gap: 1,
}) `
  cursor: default;
  &:hover {
    font-weight: bold;
  }
`;
const GroupBoxWrapper = ({ data, label, groupIndex, renderGroupPopover, renderBoxPopover, }) => {
    const ref = useRef();
    const align = ref.current && getAlign(ref.current);
    const style = useMemo(() => ({ maxWidth: `${getWidth(data.data)}px` }), [data]);
    const boxPopover = renderBoxPopover &&
        ((index, boxAlign) => renderBoxPopover({ group: label, groupIndex, align: boxAlign, index }));
    const groupPopover = renderGroupPopover && (() => renderGroupPopover({ group: label, groupIndex, align }));
    return (React.createElement(Flex, { "data-testid": "groupBoxWrapper", column: true, alignItems: "start", gap: 1, margin: [0, 4, 0, 0] },
        React.createElement(Popover, { content: groupPopover, align: align, plain: true }, ({ isOpen, ref: popoverRef, ...rest }) => (React.createElement(Label, Object.assign({ "data-testid": "groupBoxWrapper-title", ref: el => {
                ref.current = el;
                popoverRef(el);
            }, strong: isOpen, style: style }, rest),
            React.createElement(Title, null, label),
            data.data.length > 3 && React.createElement("span", null,
                "(",
                data.data.length,
                ")")))),
        React.createElement(GroupBox, { data: data, renderTooltip: boxPopover })));
};
const GroupBoxes = ({ data, labels, renderBoxPopover, renderGroupPopover }) => (React.createElement(Flex, { "data-testid": "groupBoxes", flexWrap: true, overflow: { vertical: "auto" }, flex: true }, labels.map((label, index) => {
    return data[index].data.length ? (React.createElement(GroupBoxWrapper, { key: label, label: label, groupIndex: index, data: data[index], renderGroupPopover: renderGroupPopover, renderBoxPopover: renderBoxPopover })) : null;
})));
export default GroupBoxes;
//# sourceMappingURL=groupBoxes.js.map