import React, { useState, useRef, useEffect } from 'react';
import { ClickAwayListener, Grow, Paper, Popper, MenuList, makeStyles, IconButton } from '@material-ui/core';
import { TranslateIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    paper: {
        marginRight: theme.spacing(2)
    }
}));
export const FluentSelectMenu = (props) => {
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const anchorRef = useRef(null);
    const { children } = props;
    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };
    const handleClose = (event) => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return;
        }
        setOpen(false);
    };
    function handleListKeyDown(event) {
        if (event.key === 'Tab') {
            event.preventDefault();
            setOpen(false);
        }
    }
    // return focus to the button when we transitioned from !open -> open
    const prevOpen = useRef(open);
    useEffect(() => {
        if (prevOpen.current === true && open === false) {
            anchorRef.current.focus();
        }
        prevOpen.current = open;
    }, [open]);
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement(IconButton, { ref: anchorRef, "aria-controls": open ? 'menu-list-grow' : undefined, "aria-haspopup": "true", onClick: handleToggle }, React.createElement(TranslateIcon, { style: { color: 'white', opacity: 0.8 } })), React.createElement(Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true }, ({ TransitionProps, placement }) => (React.createElement(Grow, Object.assign({}, TransitionProps, { style: {
            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
        } }), React.createElement(Paper, null, React.createElement(ClickAwayListener, { onClickAway: handleClose }, React.createElement(MenuList, { autoFocusItem: open, id: "menu-list-grow", onKeyDown: handleListKeyDown, onClick: () => setOpen(false) }, children)))))))));
};
//# sourceMappingURL=FluentSelectMenu-old.js.map