1import Menu from '@mui/material/Menu';
  2import {useTranslation} from 'next-i18next';
  3import {signOut, useSession} from 'next-auth/react';
  4import useSettings from '../../hooks/useSettings';
  5import Languages from '../Languages/MenuItem';
  6import Action, {ActionType} from './Action';
  7import ExternalLink from './ExternalLink';
  8import {Chip, Typography} from '@mui/material';
  9
 10interface Props {
 11  anchorEl: Element;
 12  setAnchorEl: (el: Element) => void;
 13  actions: ActionType[];
 14}
 15
 16const GenericMenu = (props: Props) => {
 17  const {anchorEl, setAnchorEl, actions = []} = props;
 18  const {t} = useTranslation();
 19  const settings = useSettings();
 20  const session = useSession();
 21  const isAuthenticated = session.status === 'authenticated';
 22
 23  const supportItem = {
 24    label: (
 25      <ExternalLink
 26        id="SupportCaroster"
 27        url={settings['opencollective_link']}
 28        label={
 29          <Typography variant="caption" color="textSecondary">
 30            <Chip
 31              label={t`supportCaroster`}
 32              color="secondary"
 33              sx={{fontDecoration: 'none', cursor: 'pointer'}}
 34            />
 35          </Typography>
 36        }
 37      ></ExternalLink>
 38    ),
 39  };
 40  const languageMenuItem = {
 41    label: <Languages />,
 42    id: 'LanguageSelection',
 43  };
 44  const aboutMenuItem = {
 45    label: (
 46      <ExternalLink
 47        id="AboutCaroster"
 48        url={settings['about_link']}
 49        label={
 50          <Typography variant="caption" color="textSecondary">
 51            {t('menu.about')}
 52          </Typography>
 53        }
 54      ></ExternalLink>
 55    ),
 56  };
 57  const sourceCodeItem = {
 58    label: (
 59      <ExternalLink
 60        id="SourceCode"
 61        url={settings['code_link']}
 62        label={
 63          <Typography variant="caption" color="textSecondary">
 64            {t('menu.code')}
 65          </Typography>
 66        }
 67      ></ExternalLink>
 68    ),
 69  };
 70  const logoutMenuItem = isAuthenticated && {
 71    label: t('menu.logout'),
 72    onClick: () => {
 73      setAnchorEl(null);
 74      signOut({
 75        callbackUrl: settings?.['about_link'] || '/',
 76      });
 77    },
 78    id: 'LogoutTabs',
 79    icon: 'logout',
 80  };
 81
 82  const validActions = [
 83    ...actions,
 84    languageMenuItem,
 85    logoutMenuItem,
 86    {divider: true},
 87    supportItem,
 88    aboutMenuItem,
 89    sourceCodeItem,
 90  ].filter(Boolean);
 91
 92  return (
 93    <Menu
 94      anchorEl={anchorEl}
 95      anchorOrigin={{
 96        vertical: 'top',
 97        horizontal: 'right',
 98      }}
 99      keepMounted
100      transformOrigin={{
101        vertical: 'top',
102        horizontal: 'right',
103      }}
104      open={!!anchorEl}
105      onClose={() => setAnchorEl(null)}
106    >
107      {validActions?.map((action, index) => (
108        <Action action={action} key={index} />
109      ))}
110    </Menu>
111  );
112};
113
114export default GenericMenu;