import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import { ChevronFold10Icon, ChevronUnfold10Icon } from '@fluentui/react-icons';
import { AmbientTokenButton } from '../../inputs/buttons/AmbientTokenButton';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    actionHeader: {
        display: 'flex',
        flexDirection: 'row',
        gap: 10
    },
    icon: {
        background: theme.palette.common.white,
        padding: theme.spacing(1),
        color: theme.palette.secondary.main
    }
}));
export const GridGroupingHeader = ({ expandClick, collapseClick }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.actionHeader }, React.createElement(AmbientTokenButton, { icon: ChevronFold10Icon, tooltip: "Collapse All", ariaLabel: "Collapse All", onClick: collapseClick }), React.createElement(AmbientTokenButton, { icon: ChevronUnfold10Icon, tooltip: "Expand All", ariaLabel: "Expand All", onClick: expandClick })), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { className: classes.label }, React.createElement(Typography, { variant: "caption" }, "Group By:")), React.createElement(LayoutUnit, { unit: "nudge" })));
};
GridGroupingHeader.propTypes = {
    /**
     * expand fucntion to expand grid when items are grouped
     */
    expandClick: PropTypes.func.isRequired,
    /**
     * expand fucntion to collapse grid when items are grouped
     */
    collapseClick: PropTypes.func.isRequired,
};
//# sourceMappingURL=GridGroupingHeader.js.map