import { FC, useState } from 'react';

import MoreVertIcon from '@material-hu/icons/material/MoreVert';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Menu from '@material-hu/mui/Menu';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

const ToolbarMenu: FC<React.PropsWithChildren<unknown>> = props => {
  const { children } = props;

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const open = Boolean(anchorEl);
  const { t } = useTranslation();

  const openMenu = event => setAnchorEl(event.currentTarget);
  const closeMenu = () => setAnchorEl(null);

  return (
    <Box>
      <IconButton
        id="toolbar-menu-button"
        aria-label={t('CHAT_MENU')}
        aria-controls="toolbar-menu"
        aria-expanded={open ? 'true' : undefined}
        aria-haspopup="true"
        onClick={openMenu}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id="toolbar-menu"
        MenuListProps={{
          'aria-labelledby': 'toolbar-menu-button',
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={closeMenu}
      >
        {children}
      </Menu>
    </Box>
  );
};

export default ToolbarMenu;