import { useState } from 'react';
import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
import { useTranslation } from 'react-i18next';
import MiradorMenuButton from '../containers/MiradorMenuButton';
import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';

/**
 * WorkspaceOptionsButton ~
*/
export function WorkspaceOptionsButton() {
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(false);

  /**  */
  const handleMenuClick = (event) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  /**  */
  const handleMenuClose = () => {
    setAnchorEl(null);
    setOpen(false);
  };

  return (
    <>
      <MiradorMenuButton
        aria-label={t('workspaceOptions')}
        onClick={handleMenuClick}
        selected={open}
      >
        <MoreHorizontalIcon />
      </MiradorMenuButton>
      <WorkspaceOptionsMenu
        anchorEl={anchorEl}
        handleClose={handleMenuClose}
        open={open}
      />
    </>
  );
}