import React, { useState } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { GridSidebarContainer } from './GridSidebarContainer';
import { GridGroupingHeader } from './GridGroupingHeader';
import { AssessmentGroupIcon, ChromeCloseIcon } from '@fluentui/react-icons';
import { Token } from '../../components/dataDisplay/Token';
import { AmbientToggleButton } from '../../inputs/buttons/AmbientToggleButton';
import AmbientToggleButtonGroupDefault from '../../inputs/buttons/AmbientToggleButtonGroupDefault';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    groupActionContainer: {
        display: 'flex',
        flexDirection: 'column',
        flexWrap: 'wrap',
        alignContent: 'space-around'
    },
    buttonRoot: {
        textTransform: 'none',
        fontWeight: 700,
        justifyContent: 'flex-start'
    },
    buttonGroupWrapper: {
        gap: theme.spacing(2)
    }
}));
export const GridGroupingSidebar = ({ groupItem, expandClick, collapseClick, closeClick, groupingData, height, color = '#F5F2F8' }) => {
    const classes = useStyles();
    const [view, setView] = useState('');
    const handleChange = (event, nextView) => {
        setView(nextView);
    };
    const GroupItem = ({ label, clear }) => {
        return (React.createElement(React.Fragment, null, React.createElement(Token, { icon: clear ? ChromeCloseIcon : AssessmentGroupIcon, color: "trigger", size: "small", variant: "filled", type: "icon" }), React.createElement(Typography, { variant: "caption", style: { color: 'black' } }, ' ', label, ' ')));
    };
    return (React.createElement("div", { className: classes.root }, React.createElement(GridSidebarContainer, { color: color, height: height }, React.createElement(GridGroupingHeader, { expandClick: expandClick, collapseClick: collapseClick, closeClick: closeClick }), React.createElement("div", { className: classes.groupActionContainer }, React.createElement(AmbientToggleButtonGroupDefault, { orientation: "vertical", value: view, exclusive: true, onChange: handleChange, className: classes.buttonGroupWrapper }, 
    // @todo: consider combining value and groupItem.
    groupingData.map((item) => {
        return (React.createElement(AmbientToggleButton, { value: item.value, "aria-label": item.label, onClick: () => groupItem(item.groupItem) }, React.createElement(GroupItem, { label: item.label })));
    }), React.createElement(AmbientToggleButton, { value: "noGroups", "aria-label": "noGroups", onClick: closeClick }, React.createElement(GroupItem, { label: "No Groups", clear: true })))))));
};
GridGroupingSidebar.propTypes = {
    /**
     * Function to pass along grid grouping
     */
    groupItem: PropTypes.func,
    /**
     * Expand Grouped items on grid
     */
    expandClick: PropTypes.func,
    /**
     * Collapse grouped items on grid
     */
    collapseClick: PropTypes.func,
    /**
     * Clear grouped items
     */
    closeClick: PropTypes.func,
    /**
     * Array of data to create grouping list. Example: {groupItem: 'instructors', label: 'Instructors', value: 'instructors'},
     */
    groupingData: PropTypes.array,
    /**
     * Color of the sidebar
     */
    color: PropTypes.string
};
//# sourceMappingURL=GridGroupingSidebar.js.map