text: // @flow
  
  import { makeStyles } from '@material-ui/core/styles';
  import React, { useCallback } from 'react';
  import { useTranslation } from 'react-i18next';
  import { useDispatch, useSelector } from 'react-redux';
  
  import {
      requestDisableAudioModeration,
      requestDisableVideoModeration,
      requestEnableAudioModeration,
      requestEnableVideoModeration
  } from '../../../av-moderation/actions';
  import {
      isEnabled as isAvModerationEnabled,
      isSupported as isAvModerationSupported
  } from '../../../av-moderation/functions';
  import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
  import { openDialog } from '../../../base/dialog';
  import { IconCheck, IconVideoOff } from '../../../base/icons';
  import { MEDIA_TYPE } from '../../../base/media';
  import {
      getParticipantCount,
      isEveryoneModerator
  } from '../../../base/participants';
  import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
  
  const useStyles = makeStyles(theme => {
      return {
          contextMenu: {
              bottom: 'auto',
              margin: '0',
              right: 0,
              top: '-8px',
              transform: 'translateY(-100%)',
              width: '283px'
          },
  
          text: {
              color: theme.palette.text02,
              padding: '10px 16px',
              height: '40px',
              overflow: 'hidden',
              display: 'flex',
              alignItems: 'center',
              boxSizing: 'border-box'
          },
  
          indentedLabel: {
              '& > span': {
                  marginLeft: '36px'
              }
          }
      };
  });
  
  type Props = {
  
      /**
       * Whether the menu is open.
       */
      isOpen: boolean,
  
      /**
       * Drawer close callback.
       */
      onDrawerClose: Function,
  
      /**
       * Callback for the mouse leaving this item.
       */
      onMouseLeave?: Function
  };
  
  export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props) => {
      const dispatch = useDispatch();
      const isModerationSupported = useSelector(isAvModerationSupported());
      const allModerators = useSelector(isEveryoneModerator);
      const participantCount = useSelector(getParticipantCount);
      const isAudioModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.AUDIO));
      const isVideoModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.VIDEO));
  
      const { t } = useTranslation();
  
      const disableAudioModeration = useCallback(() => dispatch(requestDisableAudioModeration()), [ dispatch ]);
  
      const disableVideoModeration = useCallback(() => dispatch(requestDisableVideoModeration()), [ dispatch ]);
  
      const enableAudioModeration = useCallback(() => dispatch(requestEnableAudioModeration()), [ dispatch ]);
  
      const enableVideoModeration = useCallback(() => dispatch(requestEnableVideoModeration()), [ dispatch ]);
  
      const classes = useStyles();
  
      const muteAllVideo = useCallback(
          () => dispatch(openDialog(MuteEveryonesVideoDialog)), [ dispatch ]);
  
      const actions = [
          {
              accessibilityLabel: t('participantsPane.actions.audioModeration'),
              className: isAudioModerationEnabled ? classes.indentedLabel : '',
              id: isAudioModerationEnabled
                  ? 'participants-pane-context-menu-stop-audio-moderation'
                  : 'participants-pane-context-menu-start-audio-moderation',
              icon: !isAudioModerationEnabled && IconCheck,
              onClick: isAudioModerationEnabled ? disableAudioModeration : enableAudioModeration,
              text: t('participantsPane.actions.audioModeration')
          }, {
              accessibilityLabel: t('participantsPane.actions.videoModeration'),
              className: isVideoModerationEnabled ? classes.indentedLabel : '',
              id: isVideoModerationEnabled
                  ? 'participants-pane-context-menu-stop-video-moderation'
                  : 'participants-pane-context-menu-start-video-moderation',
              icon: !isVideoModerationEnabled && IconCheck,
              onClick: isVideoModerationEnabled ? disableVideoModeration : enableVideoModeration,
              text: t('participantsPane.actions.videoModeration')
          }
      ];
  
      return (
          <ContextMenu
              className = { classes.contextMenu }
              hidden = { !isOpen }
              isDrawerOpen = { isOpen }
              onDrawerClose = { onDrawerClose }
              onMouseLeave = { onMouseLeave }>
              <ContextMenuItemGroup
                  actions = { [ {
                      accessibilityLabel: t('participantsPane.actions.stopEveryonesVideo'),
                      id: 'participants-pane-context-menu-stop-video',
                      icon: IconVideoOff,
                      onClick: muteAllVideo,
                      text: t('participantsPane.actions.stopEveryonesVideo')
                  } ] } />
              {isModerationSupported && (participantCount === 1 || !allModerators) && (
                  <ContextMenuItemGroup actions = { actions }>
                      <div className = { classes.text }>
                          <span>{t('participantsPane.actions.allow')}</span>
                      </div>
                  </ContextMenuItemGroup>
              )}
          </ContextMenu>
      );
  };
  