text: /* @flow */
  
  import InlineDialog from '@atlaskit/inline-dialog';
  import React, { Component } from 'react';
  
  import { createToolbarEvent, sendAnalytics } from '../../../analytics';
  import { translate } from '../../../base/i18n';
  import { HangupMenuItem } from '../../../base/toolbox/components';
  import { IconOpenInNew } from '../../../base/icons';
  
  import ToolbarButton from './ToolbarButton';
  
  /**
   * The type of the React {@code Component} props of {@link OverflowMenuButton}.
   */
   type Props = {
  
      /**
       * A child React Element to display within {@code InlineDialog}.
       */
      children: React$Node,
  
      /**
       * Whether or not the OverflowMenu popover should display.
       */
      isOpen: boolean,
  
      /**
       * Calback to change the visibility of the overflow menu.
       */
      onVisibilityChange: Function,
  
      /**
       * Invoked to obtain translated strings.
       */
      t: Function
  };
  
  class ModeratorSelectionMenu extends Component<Props> {
      /**
       * Initializes a new {@code OverflowMenuButton} instance.
       *
       * @param {Object} props - The read-only properties with which the new
       * instance is to be initialized.
       */
      constructor(props: Props) {
          super(props);
  
          // Bind event handlers so they are only bound once per instance.
          this._onCloseDialog = this._onCloseDialog.bind(this);
          this._onToggleDialogVisibility
              = this._onToggleDialogVisibility.bind(this);
      }
  
      /**
       * Implements React's {@link Component#render()}.
       *
       * @inheritdoc
       * @returns {ReactElement}
       */
      render() {
          const { children, isOpen, t } = this.props;
  
          return (
                  <InlineDialog
                      content = { children }
                      isOpen = { isOpen }
                      onClose = { this._onCloseDialog }
                      position = { 'top center' }>
                      <HangupMenuItem
                          accessibilityLabel = { t('toolbar.accessibilityLabel.grantModeratorAndHangup') }
                          icon = { IconOpenInNew }
                          key = 'hangup'
                          onClick = { this._onToggleDialogVisibility }
                          text = { t('toolbar.grantModeratorAndHangup')} />
                  </InlineDialog>
          );
      }
  
      _onCloseDialog: () => void;
  
      /**
       * Callback invoked when {@code InlineDialog} signals that it should be
       * close.
       *
       * @private
       * @returns {void}
       */
      _onCloseDialog() {
          this.props.onVisibilityChange(false);
      }
  
      _onToggleDialogVisibility: () => void;
  
      /**
       * Callback invoked to signal that an event has occurred that should change
       * the visibility of the {@code InlineDialog} component.
       *
       * @private
       * @returns {void}
       */
      _onToggleDialogVisibility() {
          this.props.onVisibilityChange(!this.props.isOpen);
      }
  }
  
  export default translate(ModeratorSelectionMenu);
  