text: // @flow
  
  import React, { useState, useEffect } from 'react';
  
  import { createInviteDialogEvent, sendAnalytics } from '../../../../analytics';
  import { getRoomName } from '../../../../base/conference';
  import { getInviteURL } from '../../../../base/connection';
  import { Dialog } from '../../../../base/dialog';
  import { translate } from '../../../../base/i18n';
  import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
  import { getLocalParticipant } from '../../../../base/participants';
  import { connect } from '../../../../base/redux';
  import { isVpaasMeeting } from '../../../../billing-counter/functions';
  import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
  import { getActiveSession } from '../../../../recording';
  import { updateDialInNumbers } from '../../../actions';
  import { _getDefaultPhoneNumber, getInviteText, isAddPeopleEnabled, isDialOutEnabled } from '../../../functions';
  
  import CopyMeetingLinkSection from './CopyMeetingLinkSection';
  import DialInSection from './DialInSection';
  import Header from './Header';
  import InviteByEmailSection from './InviteByEmailSection';
  import InviteContactsSection from './InviteContactsSection';
  import LiveStreamSection from './LiveStreamSection';
  
  declare var interfaceConfig: Object;
  
  type Props = {
  
      /**
       * The name of the current conference. Used as part of inviting users.
       */
      _conferenceName: string,
  
      /**
       * The object representing the dialIn feature.
       */
      _dialIn: Object,
  
      /**
       * Whether or not embed meeting should be visible.
       */
      _embedMeetingVisible: boolean,
  
      /**
       * Whether or not invite contacts should be visible.
       */
      _inviteContactsVisible: boolean,
  
      /**
       * The current url of the conference to be copied onto the clipboard.
       */
      _inviteUrl: string,
  
      /**
       * The current known URL for a live stream in progress.
       */
      _liveStreamViewURL: string,
  
      /**
       * The redux representation of the local participant.
       */
      _localParticipantName: ?string,
  
      /**
       * The current location url of the conference.
       */
      _locationUrl: Object,
  
      /**
       * Invoked to obtain translated strings.
       */
      t: Function,
  
      /**
       * Method to update the dial in numbers.
       */
      updateNumbers: Function
  };
  
  /**
   * Invite More component.
   *
   * @returns {React$Element<any>}
   */
  function AddPeopleDialog({
      _conferenceName,
      _dialIn,
      _embedMeetingVisible,
      _inviteContactsVisible,
      _inviteUrl,
      _liveStreamViewURL,
      _localParticipantName,
      _locationUrl,
      t,
      updateNumbers }: Props) {
      const [ phoneNumber, setPhoneNumber ] = useState(undefined);
  
      /**
       * Updates the dial-in numbers.
       */
      useEffect(() => {
          if (!_dialIn.numbers) {
              updateNumbers();
          }
      }, []);
  
      /**
       * Sends analytics events when the dialog opens/closes.
       *
       * @returns {void}
       */
      useEffect(() => {
          sendAnalytics(createInviteDialogEvent(
              'invite.dialog.opened', 'dialog'));
  
          return () => {
              sendAnalytics(createInviteDialogEvent(
                  'invite.dialog.closed', 'dialog'));
          };
      }, []);
  
      /**
       * Updates the phone number in the state once the dial-in numbers are fetched.
       *
       * @returns {void}
       */
      useEffect(() => {
          if (!phoneNumber && _dialIn && _dialIn.numbers) {
              setPhoneNumber(_getDefaultPhoneNumber(_dialIn.numbers));
          }
      }, [ _dialIn ]);
  
      const invite = getInviteText({
          _conferenceName,
          _localParticipantName,
          _inviteUrl,
          _locationUrl,
          _dialIn,
          _liveStreamViewURL,
          phoneNumber,
          t
      });
      const inviteSubject = t('addPeople.inviteMoreMailSubject', {
          appName: interfaceConfig.APP_NAME
      });
  
      return (
          <Dialog
              cancelKey = { 'dialog.close' }
              customHeader = { Header }
              hideCancelButton = { true }
              submitDisabled = { true }
              titleKey = 'addPeople.inviteMorePrompt'
              width = { 'small' }>
              <div className = 'invite-more-dialog'>
                  { _inviteContactsVisible && <InviteContactsSection /> }
                  <CopyMeetingLinkSection url = { _inviteUrl } />
                  <InviteByEmailSection
                      inviteSubject = { inviteSubject }
                      inviteText = { invite } />
                  { _embedMeetingVisible && <EmbedMeetingTrigger /> }
                  <div className = 'invite-more-dialog separator' />
                  {
                      _liveStreamViewURL
                          && <LiveStreamSection liveStreamViewURL = { _liveStreamViewURL } />
                  }
                  {
                      _dialIn.numbers
                          && <DialInSection
                              conferenceName = { _conferenceName }
                              dialIn = { _dialIn }
                              locationUrl = { _locationUrl }
                              phoneNumber = { phoneNumber } />
                  }
              </div>
          </Dialog>
      );
  }
  
  /**
   * Maps (parts of) the Redux state to the associated props for the
   * {@code AddPeopleDialog} component.
   *
   * @param {Object} state - The Redux state.
   * @private
   * @returns {Props}
   */
  function mapStateToProps(state) {
      const localParticipant = getLocalParticipant(state);
      const currentLiveStreamingSession
          = getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
      const { iAmRecorder } = state['features/base/config'];
      const addPeopleEnabled = isAddPeopleEnabled(state);
      const dialOutEnabled = isDialOutEnabled(state);
      const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
  
      return {
          _conferenceName: getRoomName(state),
          _dialIn: state['features/invite'],
          _embedMeetingVisible: !isVpaasMeeting(state),
          _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
          _inviteUrl: getInviteURL(state),
          _liveStreamViewURL:
              currentLiveStreamingSession
                  && currentLiveStreamingSession.liveStreamViewURL,
          _localParticipantName: localParticipant?.name,
          _locationUrl: state['features/base/connection'].locationURL
      };
  }
  
  /**
   * Maps dispatching of some action to React component props.
   *
   * @param {Function} dispatch - Redux action dispatcher.
   * @returns {Props}
   */
  const mapDispatchToProps = {
      updateNumbers: () => updateDialInNumbers()
  };
  
  export default translate(
      connect(mapStateToProps, mapDispatchToProps)(AddPeopleDialog)
  );
  