import { ButtonBase, makeStyles, Tooltip, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
import React from 'react';
const useStyles = makeStyles((theme) => ({
    root: {
        borderBottom: (props) => props.selected && `2px solid ${theme.palette.secondary.main}`
    },
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        marginRight: theme.spacing(2)
    },
    icon: {
        fontSize: 16,
        width: 16,
        height: 16,
        color: (props) => props.disabled
            ? theme.palette.action.disabled
            : theme.palette.secondary.main
    },
    iconWrapper: {
        background: theme.palette.common.white,
        borderRadius: 100,
        padding: theme.spacing(1)
    },
    label: {
        marginLeft: theme.spacing(1),
        fontSize: '0.875rem',
        '&:hover': { color: theme.palette.secondary.main }
    }
}), { name: 'ToolBarButton' });
export const ToolBarButton = (props) => {
    const classes = useStyles(props);
    const { component: ToolBarComponent, click, label, expanded, aria, icon = true, disabled = false } = props;
    return (React.createElement(Tooltip, { title: (expanded && label) || aria || '', "aria-label": label, placement: "top", enterDelay: !expanded && 5000 }, React.createElement(ButtonBase, { classes: {
            root: classes.root
            // label: classes.label
        }, className: classes.wrapper, onClick: click, disableRipple: true, "aria-label": aria, disabled: disabled }, icon && (React.createElement("div", { className: classes.iconWrapper }, React.createElement(ToolBarComponent, { className: classes.icon }))), React.createElement(Typography, { variant: "body2", className: classes.label }, !expanded && label))));
};
ToolBarButton.propTypes = {
    component: PropTypes.func,
    click: PropTypes.func,
    label: PropTypes.string,
    expanded: PropTypes.bool,
    aria: PropTypes.string,
    icon: PropTypes.bool
};
//# sourceMappingURL=ToolBarButton.js.map