text: import React, {
  	useState,
  	forwardRef,
  	useImperativeHandle
  } from 'react';
  import PropTypes from 'prop-types';
  import {
  	View,
  	Text,
  	StyleSheet,
  	InteractionManager
  } from 'react-native';
  import Modal from 'react-native-modal';
  import { connect } from 'react-redux';
  
  import I18n from '../../i18n';
  import Button from '../../containers/Button';
  import TextInput from '../../containers/TextInput';
  import RocketChat from '../../lib/rocketchat';
  import sharedStyles from '../Styles';
  
  import { themes } from '../../constants/colors';
  
  const styles = StyleSheet.create({
  	container: {
  		flex: 1,
  		justifyContent: 'center',
  		alignItems: 'center'
  	},
  	content: {
  		padding: 16,
  		width: '100%',
  		borderRadius: 4
  	},
  	title: {
  		fontSize: 16,
  		paddingBottom: 8,
  		...sharedStyles.textBold,
  		...sharedStyles.textAlignCenter
  	},
  	button: {
  		minWidth: 96,
  		marginBottom: 0
  	},
  	buttonContainer: {
  		flexDirection: 'row',
  		justifyContent: 'space-between'
  	},
  	tablet: {
  		height: undefined
  	}
  });
  
  const JoinCode = React.memo(forwardRef(({
  	rid,
  	t,
  	onJoin,
  	isMasterDetail,
  	theme
  }, ref) => {
  	const [visible, setVisible] = useState(false);
  	const [error, setError] = useState(false);
  	const [code, setCode] = useState('');
  
  	const show = () => setVisible(true);
  
  	const hide = () => setVisible(false);
  
  	const joinRoom = async() => {
  		try {
  			await RocketChat.joinRoom(rid, code, t);
  			onJoin();
  			hide();
  		} catch (e) {
  			setError(true);
  		}
  	};
  
  	useImperativeHandle(ref, () => ({ show }));
  
  	return (
  		<Modal
  			transparent
  			avoidKeyboard
  			useNativeDriver
  			isVisible={visible}
  			hideModalContentWhileAnimating
  		>
  			<View style={styles.container} testID='join-code'>
  				<View style={[styles.content, isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet], { backgroundColor: themes[theme].backgroundColor }]}>
  					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Insert_Join_Code')}</Text>
  					<TextInput
  						value={code}
  						theme={theme}
  						inputRef={e => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
  						returnKeyType='send'
  						autoCapitalize='none'
  						onChangeText={setCode}
  						onSubmitEditing={joinRoom}
  						placeholder={I18n.t('Join_Code')}
  						secureTextEntry
  						error={error && { error: 'error-code-invalid', reason: I18n.t('Code_or_password_invalid') }}
  						testID='join-code-input'
  					/>
  					<View style={styles.buttonContainer}>
  						<Button
  							title={I18n.t('Cancel')}
  							type='secondary'
  							style={styles.button}
  							backgroundColor={themes[theme].chatComponentBackground}
  							theme={theme}
  							testID='join-code-cancel'
  							onPress={hide}
  						/>
  						<Button
  							title={I18n.t('Join')}
  							type='primary'
  							style={styles.button}
  							theme={theme}
  							testID='join-code-submit'
  							onPress={joinRoom}
  						/>
  					</View>
  				</View>
  			</View>
  		</Modal>
  	);
  }));
  JoinCode.propTypes = {
  	rid: PropTypes.string,
  	t: PropTypes.string,
  	onJoin: PropTypes.func,
  	isMasterDetail: PropTypes.bool,
  	theme: PropTypes.string
  };
  
  const mapStateToProps = state => ({
  	isMasterDetail: state.app.isMasterDetail
  });
  export default connect(mapStateToProps, null, null, { forwardRef: true })(JoinCode);
  