import React, { Children, useCallback } from 'react';
import { usePopupState, bindTrigger, bindPopper, } from 'material-ui-popup-state/hooks';
import useId from '../../UI/widgets/utils/useId';
import { Button, ButtonGroup, Popper, Grow, Paper, ClickAwayListener, MenuList, makeStyles, } from '@material-ui/core';
import { ArrowDropDown as ArrowDropDownIcon } from '@material-ui/icons';
const useStyles = makeStyles(theme => ({
    arrowButtonRoot: {
        padding: 0,
    },
    menu: {
        zIndex: theme.zIndex.tooltip,
    },
    paper: {},
}), { name: 'SplitButton' });
/**
 * https://material-ui.com/components/button-group/#split-button
 */
export const SplitButton = props => {
    var _a, _b;
    const classes = useStyles(props);
    const { popupName, color, size, variant, label, 'aria-label': ariaLabel, children, } = props;
    const popupId = useId(popupName);
    const popupState = usePopupState({ variant: 'popper', popupId });
    const firstItem = Children.toArray(children)[0];
    const setAnchorEl = useCallback(ref => {
        if (ref)
            popupState.setAnchorEl(ref);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return (React.createElement(React.Fragment, null, React.createElement(ButtonGroup, { variant: variant, color: color, size: size, ref: setAnchorEl, "aria-label": ariaLabel }, React.createElement(Button, { onClick: (_a = firstItem === null || firstItem === void 0 ? void 0 : firstItem.props) === null || _a === void 0 ? void 0 : _a.onClick }, label || ((_b = firstItem === null || firstItem === void 0 ? void 0 : firstItem.props) === null || _b === void 0 ? void 0 : _b.children)), React.createElement(Button, Object.assign({}, bindTrigger(popupState), { className: classes.arrowButtonRoot, color: color, size: "small", "aria-expanded": popupState.isOpen ? true : undefined }), React.createElement(ArrowDropDownIcon, null))), React.createElement(Popper, Object.assign({}, bindPopper(popupState), { role: undefined, transition: true, disablePortal: true, className: classes.menu }), ({ TransitionProps, placement }) => (React.createElement(Grow, Object.assign({}, TransitionProps, { style: {
            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
        } }), React.createElement(Paper, { className: classes.paper }, React.createElement(ClickAwayListener, { onClickAway: popupState.close }, React.createElement(MenuList /*id={popupState.popupId}*/, null, children))))))));
};
//# sourceMappingURL=SplitButton.js.map