text: // @flow
  
  import React, { Component } from 'react';
  import { SafeAreaView, Text, View } from 'react-native';
  
  import { ColorSchemeRegistry } from '../../../base/color-scheme';
  import { translate } from '../../../base/i18n';
  import { LoadingIndicator } from '../../../base/react';
  import { connect } from '../../../base/redux';
  import { StyleType } from '../../../base/styles';
  
  import OverlayFrame from './OverlayFrame';
  import styles from './styles';
  import { CALL_MODE, getFeatureFlag } from '../../../base/flags';
  import { getCallTypeName, DEFAULT_CALL_MODE } from '../../../base/conference';
  
  type Props = {
  
      /**
       * The color schemed style of the component.
       */
      _styles: StyleType,
  
      /**
       * The Function to be invoked to translate i18n keys.
       */
      t: Function
  };
  
  /**
   * Implements an overlay to tell the user that there is an operation in progress in the background during connect
   * so then the app doesn't seem hung.
   */
  class LoadConfigOverlay extends Component<Props> {
      /**
       * Determines whether this overlay needs to be rendered (according to a
       * specific redux state). Called by {@link OverlayContainer}.
       *
       * @param {Object} state - The redux state.
       * @returns {boolean} - If this overlay needs to be rendered, {@code true};
       * {@code false}, otherwise.
       */
      static needsRender(state: Object) {
          return Boolean(state['features/overlay'].loadConfigOverlayVisible);
      }
      _getCallModeType = ()  => {
          const { _callMode,t } = this.props;
  
          return t('connectingOverlay.joiningRoom', {
              callMode: getCallTypeName(_callMode)
          });
      }
  
      /**
       * Implements React's {@link Component#render()}.
       *
       * @inheritdoc
       * @returns {ReactElement}
       */
      render() {
          const { _styles } = this.props;
  
          return (
              <OverlayFrame>
                  <View
                      style = { [
                          styles.loadingOverlayWrapper,
                          _styles.loadingOverlayWrapper
                      ] }>
                      <SafeAreaView>
                          <LoadingIndicator
                              color = { _styles.indicatorColor }
                              size = 'large'
                              style = { styles.connectIndicator } />
                          <Text
                              style = { [
                                  styles.loadingOverlayText,
                                  _styles.loadingOverlayText
                              ] }>
                              { this._getCallModeType() }
                          </Text>
                      </SafeAreaView>
                  </View>
              </OverlayFrame>
          );
      }
  }
  
  /**
   * Maps part of the Redux state to the props of this component.
   *
   * @param {Object} state - The Redux state.
   * @returns {{
   *     _styles: StyleType
   * }}
   */
  function _mapStateToProps(state: Object): Object {
      return {
          _styles: ColorSchemeRegistry.get(state, 'LoadConfigOverlay'),
          _callMode: getFeatureFlag(state, CALL_MODE, DEFAULT_CALL_MODE)
  
      };
  }
  
  export default translate(connect(_mapStateToProps)(LoadConfigOverlay));
  