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  };
 80
 81  const validActions = [
 82    ...actions,
 83    supportItem,
 84    languageMenuItem,
 85    logoutMenuItem,
 86    {divider: true},
 87    aboutMenuItem,
 88    sourceCodeItem,
 89  ].filter(Boolean);
 90
 91  return (
 92    <Menu
 93      anchorEl={anchorEl}
 94      anchorOrigin={{
 95        vertical: 'top',
 96        horizontal: 'right',
 97      }}
 98      keepMounted
 99      transformOrigin={{
100        vertical: 'top',
101        horizontal: 'right',
102      }}
103      open={!!anchorEl}
104      onClose={() => setAnchorEl(null)}
105    >
106      {validActions?.map((action, index) => (
107        <Action action={action} key={index} />
108      ))}
109    </Menu>
110  );
111};
112
113export default GenericMenu;