text: import React from 'react';
  import PropTypes from 'prop-types';
  import {
  	Text, ScrollView, StyleSheet
  } from 'react-native';
  import { connect } from 'react-redux';
  import { SafeAreaView } from 'react-navigation';
  import Orientation from 'react-native-orientation-locker';
  
  import { loginRequest as loginRequestAction } from '../actions/login';
  import TextInput from '../containers/TextInput';
  import Button from '../containers/Button';
  import KeyboardView from '../presentation/KeyboardView';
  import sharedStyles from './Styles';
  import scrollPersistTaps from '../utils/scrollPersistTaps';
  import I18n from '../i18n';
  import RocketChat from '../lib/rocketchat';
  import StatusBar from '../containers/StatusBar';
  import log from '../utils/log';
  import { themedHeader } from '../utils/navigation';
  import { withTheme } from '../theme';
  import { themes } from '../constants/colors';
  import { isTablet } from '../utils/deviceInfo';
  import { getUserSelector } from '../selectors/login';
  
  const styles = StyleSheet.create({
  	loginTitle: {
  		marginVertical: 0,
  		marginTop: 15
  	}
  });
  
  class SetUsernameView extends React.Component {
  	static navigationOptions = ({ navigation, screenProps }) => {
  		const title = navigation.getParam('title');
  		return {
  			...themedHeader(screenProps.theme),
  			title
  		};
  	}
  
  	static propTypes = {
  		navigation: PropTypes.object,
  		server: PropTypes.string,
  		userId: PropTypes.string,
  		loginRequest: PropTypes.func,
  		token: PropTypes.string,
  		theme: PropTypes.string
  	}
  
  	constructor(props) {
  		super(props);
  		this.state = {
  			username: '',
  			saving: false
  		};
  		const { server } = this.props;
  		props.navigation.setParams({ title: server });
  		if (!isTablet) {
  			Orientation.lockToPortrait();
  		}
  	}
  
  	async componentDidMount() {
  		const suggestion = await RocketChat.getUsernameSuggestion();
  		if (suggestion.success) {
  			this.setState({ username: suggestion.result });
  		}
  	}
  
  	shouldComponentUpdate(nextProps, nextState) {
  		const { username, saving } = this.state;
  		const { theme } = this.props;
  		if (nextProps.theme !== theme) {
  			return true;
  		}
  		if (nextState.username !== username) {
  			return true;
  		}
  		if (nextState.saving !== saving) {
  			return true;
  		}
  		return false;
  	}
  
  	submit = async() => {
  		const { username } = this.state;
  		const { loginRequest, token } = this.props;
  
  		if (!username.trim()) {
  			return;
  		}
  
  		this.setState({ saving: true });
  		try {
  			await RocketChat.setUsername(username);
  			await loginRequest({ resume: token });
  		} catch (e) {
  			log(e);
  		}
  		this.setState({ saving: false });
  	}
  
  	render() {
  		const { username, saving } = this.state;
  		const { theme } = this.props;
  		return (
  			<KeyboardView
  				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
  				contentContainerStyle={sharedStyles.container}
  			>
  				<StatusBar theme={theme} />
  				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
  					<SafeAreaView style={sharedStyles.container} testID='set-username-view' forceInset={{ vertical: 'never' }}>
  						<Text
  							style={[
  								sharedStyles.loginTitle,
  								sharedStyles.textBold,
  								styles.loginTitle,
  								{ color: themes[theme].titleText }
  							]}
  						>
  							{I18n.t('Username')}
  						</Text>
  						<Text
  							style={[
  								sharedStyles.loginSubtitle,
  								sharedStyles.textRegular,
  								{ color: themes[theme].titleText }
  							]}
  						>
  							{I18n.t('Set_username_subtitle')}
  						</Text>
  						<TextInput
  							autoFocus
  							placeholder={I18n.t('Username')}
  							returnKeyType='send'
  							iconLeft='at'
  							onChangeText={value => this.setState({ username: value })}
  							value={username}
  							onSubmitEditing={this.submit}
  							testID='set-username-view-input'
  							clearButtonMode='while-editing'
  							containerStyle={sharedStyles.inputLastChild}
  							theme={theme}
  						/>
  						<Button
  							title={I18n.t('Register')}
  							type='primary'
  							onPress={this.submit}
  							testID='set-username-view-submit'
  							disabled={!username}
  							loading={saving}
  							theme={theme}
  						/>
  					</SafeAreaView>
  				</ScrollView>
  			</KeyboardView>
  		);
  	}
  }
  
  const mapStateToProps = state => ({
  	server: state.server.server,
  	token: getUserSelector(state).token
  });
  
  const mapDispatchToProps = dispatch => ({
  	loginRequest: params => dispatch(loginRequestAction(params))
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(withTheme(SetUsernameView));
  