import { FC } from 'react';

import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import Typography from '@material-hu/mui/Typography';

import useSnackbar from '@material-hu/components/design-system/Snackbar';

import { useTranslation } from '../i18n';

export type MoreOptionsMenuProps = {
  moreOptionsAnchorEl: any;
  handleMoreOptionsClose: () => void;
  handleOpenOrientationDialog: () => void;
};

const MoreOptionsMenu: FC<MoreOptionsMenuProps> = props => {
  const {
    moreOptionsAnchorEl,
    handleMoreOptionsClose,
    handleOpenOrientationDialog,
  } = props;

  const { t } = useTranslation();
  const { enqueueSnackbar } = useSnackbar();

  const copyUrlToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      enqueueSnackbar({ title: t('CLIPBOARD_COPY'), variant: 'success' });
    } catch (error) {
      enqueueSnackbar({ title: t('CLIPBOARD_COPY_ERROR'), variant: 'error' });
    }
    handleMoreOptionsClose();
  };

  return (
    <>
      <Menu
        anchorEl={moreOptionsAnchorEl}
        open={Boolean(moreOptionsAnchorEl)}
        onClose={handleMoreOptionsClose}
        sx={{
          borderRadius: '4px',
          '& .MuiPaper-root': {
            borderRadius: '4px !important',
          },
        }}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem
          onClick={handleOpenOrientationDialog}
          sx={{ px: 2, py: '6px' }}
        >
          <Typography>{t('CHANGE_ORIENTATION')}</Typography>
        </MenuItem>
        <MenuItem
          onClick={copyUrlToClipboard}
          sx={{ px: 2, py: '6px' }}
        >
          <Typography>{t('SHARE_LINK')}</Typography>
        </MenuItem>
      </Menu>
    </>
  );
};

export default MoreOptionsMenu;