text: import React from 'react';
  import {
      Animated,
      Keyboard,
      SafeAreaView,
      TextInput,
      TouchableHighlight,
      TouchableOpacity,
      View
  } from 'react-native';
  
  import { getName } from '../../app/functions';
  import { ColorSchemeRegistry } from '../../base/color-scheme';
  import { translate } from '../../base/i18n';
  import { Icon, IconMenu, IconWarning } from '../../base/icons';
  import { MEDIA_TYPE } from '../../base/media';
  import { Header, LoadingIndicator, Text } from '../../base/react';
  import { connect } from '../../base/redux';
  import { ColorPalette } from '../../base/styles';
  import {
      createDesiredLocalTracks,
      destroyLocalDesktopTrackIfExists,
      destroyLocalTracks
  } from '../../base/tracks';
  import { HelpView } from '../../help';
  import { DialInSummary } from '../../invite';
  import { SettingsView } from '../../settings';
  import { setSideBarVisible } from '../actions';
  
  import {
      AbstractWelcomePage,
      _mapStateToProps as _abstractMapStateToProps
  } from './AbstractWelcomePage';
  import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
  import VideoSwitch from './VideoSwitch';
  import WelcomePageLists from './WelcomePageLists';
  import WelcomePageSideBar from './WelcomePageSideBar';
  import styles, { PLACEHOLDER_TEXT_COLOR } from './styles';
  
  /**
   * The native container rendering the welcome page.
   *
   * @extends AbstractWelcomePage
   */
  class WelcomePage extends AbstractWelcomePage {
      /**
       * Constructor of the Component.
       *
       * @inheritdoc
       */
      constructor(props) {
          super(props);
  
          this.state._fieldFocused = false;
          this.state.hintBoxAnimation = new Animated.Value(0);
  
          // Bind event handlers so they are only bound once per instance.
          this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
          this._onShowSideBar = this._onShowSideBar.bind(this);
          this._renderHintBox = this._renderHintBox.bind(this);
  
          // Specially bind functions to avoid function definition on render.
          this._onFieldBlur = this._onFieldFocusChange.bind(this, false);
          this._onFieldFocus = this._onFieldFocusChange.bind(this, true);
      }
  
      /**
       * Implements React's {@link Component#componentDidMount()}. Invoked
       * immediately after mounting occurs. Creates a local video track if none
       * is available and the camera permission was already granted.
       *
       * @inheritdoc
       * @returns {void}
       */
      componentDidMount() {
          super.componentDidMount();
  
          this._updateRoomname();
  
          const { dispatch } = this.props;
  
          if (this.props._settings.startAudioOnly) {
              dispatch(destroyLocalTracks());
          } else {
              dispatch(destroyLocalDesktopTrackIfExists());
  
              // Make sure we don't request the permission for the camera from
              // the start. We will, however, create a video track iff the user
              // already granted the permission.
              navigator.permissions.query({ name: 'camera' }).then(response => {
                  response === 'granted'
                      && dispatch(createDesiredLocalTracks(MEDIA_TYPE.VIDEO));
              });
          }
      }
  
      /**
       * Implements React's {@link Component#render()}. Renders a prompt for
       * entering a room name.
       *
       * @inheritdoc
       * @returns {ReactElement}
       */
      render() {
          // We want to have the welcome page support the reduced UI layout,
          // but we ran into serious issues enabling it so we disable it
          // until we have a proper fix in place. We leave the code here though, because
          // this part should be fine when the bug is fixed.
          //
          // NOTE: when re-enabling, don't forget to uncomment the respective _mapStateToProps line too
  
          /*
          const { _reducedUI } = this.props;
  
          if (_reducedUI) {
              return this._renderReducedUI();
          }
          */
  
          return this._renderFullUI();
      }
  
      /**
       * Renders the insecure room name warning.
       *
       * @inheritdoc
       */
      _doRenderInsecureRoomNameWarning() {
          return (
              <View
                  style = { [
                      styles.messageContainer,
                      styles.insecureRoomNameWarningContainer
                  ] }>
                  <Icon
                      src = { IconWarning }
                      style = { styles.insecureRoomNameWarningIcon } />
                  <Text style = { styles.insecureRoomNameWarningText }>
                      { this.props.t('security.insecureRoomNameWarning') }
                  </Text>
              </View>
          );
      }
  
      /**
       * Constructs a style array to handle the hint box animation.
       *
       * @private
       * @returns {Array<Object>}
       */
      _getHintBoxStyle() {
          return [
              styles.messageContainer,
              styles.hintContainer,
              {
                  opacity: this.state.hintBoxAnimation
              }
          ];
      }
  
      /**
       * Callback for when the room field's focus changes so the hint box
       * must be rendered or removed.
       *
       * @private
       * @param {boolean} focused - The focused state of the field.
       * @returns {void}
       */
      _onFieldFocusChange(focused) {
          if (focused) {
              // Stop placeholder animation.
              this._clearTimeouts();
              this.setState({
                  _fieldFocused: true,
                  roomPlaceholder: ''
              });
          } else {
              // Restart room placeholder animation.
              this._updateRoomname();
          }
  
          Animated.timing(
              this.state.hintBoxAnimation,
              {
                  duration: 300,
                  toValue: focused ? 1 : 0
              })
              .start(animationState =>
                  animationState.finished
                      && !focused
                      && this.setState({
                          _fieldFocused: false
                      }));
      }
  
      /**
       * Toggles the side bar.
       *
       * @private
       * @returns {void}
       */
      _onShowSideBar() {
          Keyboard.dismiss();
          this.props.dispatch(setSideBarVisible(true));
      }
  
      /**
       * Renders the hint box if necessary.
       *
       * @private
       * @returns {React$Node}
       */
      _renderHintBox() {
          if (this.state._fieldFocused) {
              const { t } = this.props;
  
              return (
                  <Animated.View style = { this._getHintBoxStyle() }>
                      <View style = { styles.hintTextContainer } >
                          <Text style = { styles.hintText }>
                              { t('welcomepage.roomnameHint') }
                          </Text>
                      </View>
                      <View style = { styles.hintButtonContainer } >
                          { this._renderJoinButton() }
                      </View>
                  </Animated.View>
              );
          }
  
          return null;
      }
  
      /**
       * Renders the join button.
       *
       * @private
       * @returns {ReactElement}
       */
      _renderJoinButton() {
          const { t } = this.props;
          let children;
  
  
          if (this.state.joining) {
              // TouchableHighlight is picky about what its children can be, so
              // wrap it in a native component, i.e. View to avoid having to
              // modify non-native children.
              children = (
                  <View>
                      <LoadingIndicator
                          color = { styles.buttonText.color }
                          size = 'small' />
                  </View>
              );
          } else {
              children = (
                  <Text style = { styles.buttonText }>
                      { this.props.t('welcomepage.join') }
                  </Text>
              );
          }
  
          return (
              <TouchableHighlight
                  accessibilityLabel =
                      { t('welcomepage.accessibilityLabel.join') }
                  onPress = { this._onJoin }
                  style = { styles.button }
                  underlayColor = { ColorPalette.white }>
                  { children }
              </TouchableHighlight>
          );
      }
  
      /**
       * Renders the full welcome page.
       *
       * @returns {ReactElement}
       */
      _renderFullUI() {
          const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
          const { _headerStyles, t } = this.props;
  
          return (
              <LocalVideoTrackUnderlay style = { styles.welcomePage }>
                  <View style = { _headerStyles.page }>
                      <Header style = { styles.header }>
                          <TouchableOpacity onPress = { this._onShowSideBar } >
                              <Icon
                                  src = { IconMenu }
                                  style = { _headerStyles.headerButtonIcon } />
                          </TouchableOpacity>
                          <VideoSwitch />
                      </Header>
                      <SafeAreaView style = { styles.roomContainer } >
                          <View style = { styles.joinControls } >
                              <Text style = { styles.enterRoomText }>
                                  { t('welcomepage.roomname') }
                              </Text>
                              <TextInput
                                  accessibilityLabel = { t(roomnameAccLabel) }
                                  autoCapitalize = 'none'
                                  autoComplete = 'off'
                                  autoCorrect = { false }
                                  autoFocus = { false }
                                  onBlur = { this._onFieldBlur }
                                  onChangeText = { this._onRoomChange }
                                  onFocus = { this._onFieldFocus }
                                  onSubmitEditing = { this._onJoin }
                                  placeholder = { this.state.roomPlaceholder }
                                  placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
                                  returnKeyType = { 'go' }
                                  style = { styles.textInput }
                                  underlineColorAndroid = 'transparent'
                                  value = { this.state.room } />
                              {
                                  this._renderInsecureRoomNameWarning()
                              }
                              {
                                  this._renderHintBox()
                              }
                          </View>
                      </SafeAreaView>
                      <WelcomePageLists disabled = { this.state._fieldFocused } />
                  </View>
                  <WelcomePageSideBar />
                  { this._renderWelcomePageModals() }
              </LocalVideoTrackUnderlay>
          );
      }
  
      /**
       * Renders a "reduced" version of the welcome page.
       *
       * @returns {ReactElement}
       */
      _renderReducedUI() {
          const { t } = this.props;
  
          return (
              <View style = { styles.reducedUIContainer }>
                  <Text style = { styles.reducedUIText }>
                      { t('welcomepage.reducedUIText', { app: getName() }) }
                  </Text>
              </View>
          );
      }
  
      /**
       * Renders JitsiModals that are supposed to be on the welcome page.
       *
       * @returns {Array<ReactElement>}
       */
      _renderWelcomePageModals() {
          return [
              <HelpView key = 'helpView' />,
              <DialInSummary key = 'dialInSummary' />,
              <SettingsView key = 'settings' />
          ];
      }
  }
  
  /**
   * Maps part of the Redux state to the props of this component.
   *
   * @param {Object} state - The Redux state.
   * @returns {Object}
   */
  function _mapStateToProps(state) {
      return {
          ..._abstractMapStateToProps(state),
          _headerStyles: ColorSchemeRegistry.get(state, 'Header')
  
          // _reducedUI: state['features/base/responsive-ui'].reducedUI
      };
  }
  
  export default translate(connect(_mapStateToProps)(WelcomePage));
  