import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import { Colors } from "@uipath/apollo-core";
const GroupHeader = ({ label, hint, count, countLabel, dense, isFirst, leadingIcon, collapsible, collapsed, onToggle, 'data-testid': dataTestId })=>{
    const resolvedCountLabel = countLabel ?? (null != count ? `${count} ${1 === count ? 'model' : 'models'}` : null);
    const content = /*#__PURE__*/ jsxs(Fragment, {
        children: [
            leadingIcon && /*#__PURE__*/ jsx(Box, {
                "aria-hidden": true,
                sx: {
                    display: 'flex',
                    alignItems: 'center',
                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                    mr: 0.25
                },
                children: leadingIcon
            }),
            /*#__PURE__*/ jsx(Typography, {
                variant: "overline",
                sx: {
                    fontSize: dense ? 9 : 11,
                    fontWeight: 700,
                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                    letterSpacing: 0.7,
                    lineHeight: 1.2,
                    display: 'block',
                    flex: '1 1 auto'
                },
                children: label
            }),
            null != resolvedCountLabel && /*#__PURE__*/ jsx(Typography, {
                variant: "caption",
                sx: {
                    color: `var(--color-foreground-disable, ${Colors.ColorGray500})`,
                    fontSize: dense ? 10 : 11,
                    fontWeight: 400,
                    flexShrink: 0
                },
                children: resolvedCountLabel
            }),
            collapsible && /*#__PURE__*/ jsx(KeyboardArrowRight, {
                "aria-hidden": true,
                sx: {
                    fontSize: 18,
                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                    transition: 'transform 150ms',
                    transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)',
                    flexShrink: 0
                }
            })
        ]
    });
    const baseSx = {
        width: '100%',
        px: dense ? 1.5 : 1.75,
        pt: isFirst ? dense ? 0.75 : 1.5 : dense ? 1.25 : 1.75,
        pb: dense ? 0.5 : 0.875,
        backgroundColor: `var(--color-background-secondary, ${Colors.ColorGray150})`,
        borderTop: isFirst ? 'none' : `1px solid var(--color-border-grid, ${Colors.ColorGray150})`,
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        textAlign: 'left'
    };
    if (collapsible) return /*#__PURE__*/ jsx(ButtonBase, {
        component: "div",
        role: "button",
        title: hint,
        "data-testid": dataTestId,
        onClick: onToggle,
        "aria-expanded": !collapsed,
        sx: {
            ...baseSx,
            cursor: 'pointer',
            '&:hover': {
                backgroundColor: "var(--color-background-hover, rgba(82, 96, 105, 0.078))"
            }
        },
        children: content
    });
    return /*#__PURE__*/ jsx(Box, {
        title: hint,
        role: "presentation",
        "data-testid": dataTestId,
        sx: baseSx,
        children: content
    });
};
export { GroupHeader };
