vn-verdnaturachat/app/containers/MessageBox/index.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	View, Alert, Keyboard, NativeModules
} from 'react-native';
import { connect } from 'react-redux';
import { KeyboardAccessoryView } from 'react-native-keyboard-input';
import ImagePicker from 'react-native-image-crop-picker';
import equal from 'deep-equal';
import DocumentPicker from 'react-native-document-picker';
import { Q } from '@nozbe/watermelondb';

import { generateTriggerId } from '../../lib/methods/actions';
import TextInput from '../../presentation/TextInput';
import { userTyping as userTypingAction } from '../../actions/room';
import RocketChat from '../../lib/rocketchat';
import styles from './styles';
import database from '../../lib/database';
import { emojis } from '../../emojis';
import RecordAudio from './RecordAudio';
import log from '../../utils/log';
import I18n from '../../i18n';
import ReplyPreview from './ReplyPreview';
import debounce from '../../utils/debounce';
import { themes } from '../../constants/colors';
import LeftButtons from './LeftButtons';
import RightButtons from './RightButtons';
import { isAndroid, isTablet } from '../../utils/deviceInfo';
import { canUploadFile } from '../../utils/media';
import EventEmiter from '../../utils/events';
import {
	KEY_COMMAND,
	handleCommandTyping,
	handleCommandSubmit,
	handleCommandShowUpload
} from '../../commands';
import Mentions from './Mentions';
import MessageboxContext from './Context';
import {
	MENTIONS_TRACKING_TYPE_EMOJIS,
	MENTIONS_TRACKING_TYPE_COMMANDS,
	MENTIONS_COUNT_TO_DISPLAY,
	MENTIONS_TRACKING_TYPE_USERS
} from './constants';
import CommandsPreview from './CommandsPreview';
import { getUserSelector } from '../../selectors/login';
import Navigation from '../../lib/Navigation';
import { withActionSheet } from '../ActionSheet';

const imagePickerConfig = {
	cropping: true,
	compressImageQuality: 0.8,
	avoidEmptySpaceAroundImage: false
};

const libraryPickerConfig = {
	multiple: true,
	mediaType: 'any'
};

const videoPickerConfig = {
	mediaType: 'video'
};

class MessageBox extends Component {
	static propTypes = {
		rid: PropTypes.string.isRequired,
		baseUrl: PropTypes.string.isRequired,
		message: PropTypes.object,
		replying: PropTypes.bool,
		editing: PropTypes.bool,
		threadsEnabled: PropTypes.bool,
		isFocused: PropTypes.func,
		user: PropTypes.shape({
			id: PropTypes.string,
			username: PropTypes.string,
			token: PropTypes.string
		}),
		roomType: PropTypes.string,
		tmid: PropTypes.string,
		replyWithMention: PropTypes.bool,
		FileUpload_MediaTypeWhiteList: PropTypes.string,
		FileUpload_MaxFileSize: PropTypes.number,
		Message_AudioRecorderEnabled: PropTypes.bool,
		getCustomEmoji: PropTypes.func,
		editCancel: PropTypes.func.isRequired,
		editRequest: PropTypes.func.isRequired,
		onSubmit: PropTypes.func.isRequired,
		typing: PropTypes.func,
		theme: PropTypes.string,
		replyCancel: PropTypes.func,
		showSend: PropTypes.bool,
		navigation: PropTypes.object,
		children: PropTypes.node,
		isMasterDetail: PropTypes.bool,
		showActionSheet: PropTypes.func,
		iOSScrollBehavior: PropTypes.number,
		sharing: PropTypes.bool,
		isActionsEnabled: PropTypes.bool
	}

	static defaultProps = {
		message: {
			id: ''
		},
		sharing: false,
		iOSScrollBehavior: NativeModules.KeyboardTrackingViewManager?.KeyboardTrackingScrollBehaviorFixedOffset,
		isActionsEnabled: true,
		getCustomEmoji: () => {}
	}

	constructor(props) {
		super(props);
		this.state = {
			mentions: [],
			showEmojiKeyboard: false,
			showSend: props.showSend,
			recording: false,
			trackingType: '',
			commandPreview: [],
			showCommandPreview: false,
			command: {}
		};
		this.text = '';
		this.focused = false;

		// MessageBox Actions
		this.options = [
			{
				title: I18n.t('Take_a_photo'),
				icon: 'image',
				onPress: this.takePhoto
			},
			{
				title: I18n.t('Take_a_video'),
				icon: 'video-1',
				onPress: this.takeVideo
			},
			{
				title: I18n.t('Choose_from_library'),
				icon: 'share',
				onPress: this.chooseFromLibrary
			},
			{
				title: I18n.t('Choose_file'),
				icon: 'folder',
				onPress: this.chooseFile
			},
			{
				title: I18n.t('Create_Discussion'),
				icon: 'chat',
				onPress: this.createDiscussion
			}
		];

		const libPickerLabels = {
			cropperChooseText: I18n.t('Choose'),
			cropperCancelText: I18n.t('Cancel'),
			loadingLabelText: I18n.t('Processing')
		};
		this.imagePickerConfig = {
			...imagePickerConfig,
			...libPickerLabels
		};
		this.libraryPickerConfig = {
			...libraryPickerConfig,
			...libPickerLabels
		};
		this.videoPickerConfig = {
			...videoPickerConfig,
			...libPickerLabels
		};
	}

	async componentDidMount() {
		const db = database.active;
		const {
			rid, tmid, navigation, sharing
		} = this.props;
		let msg;
		try {
			const threadsCollection = db.collections.get('threads');
			const subsCollection = db.collections.get('subscriptions');
			try {
				this.room = await subsCollection.find(rid);
			} catch (error) {
				console.log('Messagebox.didMount: Room not found');
			}
			if (tmid) {
				try {
					this.thread = await threadsCollection.find(tmid);
					if (this.thread && !sharing) {
						msg = this.thread.draftMessage;
					}
				} catch (error) {
					console.log('Messagebox.didMount: Thread not found');
				}
			} else if (!sharing) {
				msg = this.room?.draftMessage;
			}
		} catch (e) {
			log(e);
		}

		if (msg) {
			this.setInput(msg);
			this.setShowSend(true);
		}

		if (isAndroid) {
			require('./EmojiKeyboard');
		}

		if (isTablet) {
			EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
		}

		this.unsubscribeFocus = navigation.addListener('focus', () => {
			if (this.tracking && this.tracking.resetTracking) {
				this.tracking.resetTracking();
			}
		});
		this.unsubscribeBlur = navigation.addListener('blur', () => {
			this.component?.blur();
		});
	}

	UNSAFE_componentWillReceiveProps(nextProps) {
		const {
			isFocused, editing, replying, sharing
		} = this.props;
		if (!isFocused?.()) {
			return;
		}
		if (sharing) {
			this.setInput(nextProps.message.msg ?? '');
			return;
		}
		if (editing !== nextProps.editing && nextProps.editing) {
			this.setInput(nextProps.message.msg);
			if (this.text) {
				this.setShowSend(true);
			}
			this.focus();
		} else if (replying !== nextProps.replying && nextProps.replying) {
			this.focus();
		} else if (!nextProps.message) {
			this.clearInput();
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		const {
			showEmojiKeyboard, showSend, recording, mentions, commandPreview
		} = this.state;

		const {
			roomType, replying, editing, isFocused, message, theme, children
		} = this.props;
		if (nextProps.theme !== theme) {
			return true;
		}
		if (!isFocused()) {
			return false;
		}
		if (nextProps.roomType !== roomType) {
			return true;
		}
		if (nextProps.replying !== replying) {
			return true;
		}
		if (nextProps.editing !== editing) {
			return true;
		}
		if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
			return true;
		}
		if (nextState.showSend !== showSend) {
			return true;
		}
		if (nextState.recording !== recording) {
			return true;
		}
		if (!equal(nextState.mentions, mentions)) {
			return true;
		}
		if (!equal(nextState.commandPreview, commandPreview)) {
			return true;
		}
		if (!equal(nextProps.message, message)) {
			return true;
		}
		if (!equal(nextProps.children, children)) {
			return true;
		}
		return false;
	}

	componentWillUnmount() {
		console.countReset(`${ this.constructor.name }.render calls`);
		if (this.onChangeText && this.onChangeText.stop) {
			this.onChangeText.stop();
		}
		if (this.getUsers && this.getUsers.stop) {
			this.getUsers.stop();
		}
		if (this.getRooms && this.getRooms.stop) {
			this.getRooms.stop();
		}
		if (this.getEmojis && this.getEmojis.stop) {
			this.getEmojis.stop();
		}
		if (this.getSlashCommands && this.getSlashCommands.stop) {
			this.getSlashCommands.stop();
		}
		if (this.unsubscribeFocus) {
			this.unsubscribeFocus();
		}
		if (this.unsubscribeBlur) {
			this.unsubscribeBlur();
		}
		if (isTablet) {
			EventEmiter.removeListener(KEY_COMMAND, this.handleCommands);
		}
	}

	onChangeText = (text) => {
		const isTextEmpty = text.length === 0;
		this.setShowSend(!isTextEmpty);
		this.debouncedOnChangeText(text);
		this.setInput(text);
	}

	// eslint-disable-next-line react/sort-comp
	debouncedOnChangeText = debounce(async(text) => {
		const { sharing } = this.props;
		const db = database.active;
		const isTextEmpty = text.length === 0;
		// this.setShowSend(!isTextEmpty);
		this.handleTyping(!isTextEmpty);

		if (!sharing) {
			// matches if their is text that stats with '/' and group the command and params so we can use it "/command params"
			const slashCommand = text.match(/^\/([a-z0-9._-]+) (.+)/im);
			if (slashCommand) {
				const [, name, params] = slashCommand;
				const commandsCollection = db.collections.get('slash_commands');
				try {
					const command = await commandsCollection.find(name);
					if (command.providesPreview) {
						return this.setCommandPreview(command, name, params);
					}
				} catch (e) {
					console.log('Slash command not found');
				}
			}
		}

		if (!isTextEmpty) {
			try {
				const { start, end } = this.component?.lastNativeSelection;
				const cursor = Math.max(start, end);
				const lastNativeText = this.component?.lastNativeText || '';
				// matches if text either starts with '/' or have (@,#,:) then it groups whatever comes next of mention type
				let regexp = /(#|@|:|^\/)([a-z0-9._-]+)$/im;

				// if sharing, track #|@|:
				if (sharing) {
					regexp = /(#|@|:)([a-z0-9._-]+)$/im;
				}

				const result = lastNativeText.substr(0, cursor).match(regexp);
				if (!result) {
					if (!sharing) {
						const slash = lastNativeText.match(/^\/$/); // matches only '/' in input
						if (slash) {
							return this.identifyMentionKeyword('', MENTIONS_TRACKING_TYPE_COMMANDS);
						}
					}
					return this.stopTrackingMention();
				}
				const [, lastChar, name] = result;
				this.identifyMentionKeyword(name, lastChar);
			} catch (e) {
				log(e);
			}
		} else {
			this.stopTrackingMention();
		}
	}, 100)

	onKeyboardResigned = () => {
		this.closeEmoji();
	}

	onPressMention = (item) => {
		if (!this.component) {
			return;
		}
		const { trackingType } = this.state;
		const msg = this.text;
		const { start, end } = this.component?.lastNativeSelection;
		const cursor = Math.max(start, end);
		const regexp = /([a-z0-9._-]+)$/im;
		const result = msg.substr(0, cursor).replace(regexp, '');
		const mentionName = trackingType === MENTIONS_TRACKING_TYPE_EMOJIS
			? `${ item.name || item }:`
			: (item.username || item.name || item.command);
		const text = `${ result }${ mentionName } ${ msg.slice(cursor) }`;
		if ((trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) && item.providesPreview) {
			this.setState({ showCommandPreview: true });
		}
		this.setInput(text);
		this.focus();
		requestAnimationFrame(() => this.stopTrackingMention());
	}

	onPressCommandPreview = (item) => {
		const { command } = this.state;
		const {
			rid, tmid, message: { id: messageTmid }, replyCancel
		} = this.props;
		const { text } = this;
		const name = text.substr(0, text.indexOf(' ')).slice(1);
		const params = text.substr(text.indexOf(' ') + 1) || 'params';
		this.setState({ commandPreview: [], showCommandPreview: false, command: {} });
		this.stopTrackingMention();
		this.clearInput();
		this.handleTyping(false);
		try {
			const { appId } = command;
			const triggerId = generateTriggerId(appId);
			RocketChat.executeCommandPreview(name, params, rid, item, triggerId, tmid || messageTmid);
			replyCancel();
		} catch (e) {
			log(e);
		}
	}

	onEmojiSelected = (keyboardId, params) => {
		const { text } = this;
		const { emoji } = params;
		let newText = '';

		// if messagebox has an active cursor
		if (this.component?.lastNativeSelection) {
			const { start, end } = this.component.lastNativeSelection;
			const cursor = Math.max(start, end);
			newText = `${ text.substr(0, cursor) }${ emoji }${ text.substr(cursor) }`;
		} else {
			// if messagebox doesn't have a cursor, just append selected emoji
			newText = `${ text }${ emoji }`;
		}
		this.setInput(newText);
		this.setShowSend(true);
	}

	getPermalink = async(message) => {
		try {
			return await RocketChat.getPermalinkMessage(message);
		} catch (error) {
			return null;
		}
	}

	getFixedMentions = (keyword) => {
		let result = [];
		if ('all'.indexOf(keyword) !== -1) {
			result = [{ id: -1, username: 'all' }];
		}
		if ('here'.indexOf(keyword) !== -1) {
			result = [{ id: -2, username: 'here' }, ...result];
		}
		return result;
	}

	getUsers = debounce(async(keyword) => {
		let res = await RocketChat.search({ text: keyword, filterRooms: false, filterUsers: true });
		res = [...this.getFixedMentions(keyword), ...res];
		this.setState({ mentions: res });
	}, 300)

	getRooms = debounce(async(keyword = '') => {
		const res = await RocketChat.search({ text: keyword, filterRooms: true, filterUsers: false });
		this.setState({ mentions: res });
	}, 300)

	getEmojis = debounce(async(keyword) => {
		const db = database.active;
		if (keyword) {
			const customEmojisCollection = db.collections.get('custom_emojis');
			let customEmojis = await customEmojisCollection.query(
				Q.where('name', Q.like(`${ Q.sanitizeLikeString(keyword) }%`))
			).fetch();
			customEmojis = customEmojis.slice(0, MENTIONS_COUNT_TO_DISPLAY);
			const filteredEmojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, MENTIONS_COUNT_TO_DISPLAY);
			const mergedEmojis = [...customEmojis, ...filteredEmojis].slice(0, MENTIONS_COUNT_TO_DISPLAY);
			this.setState({ mentions: mergedEmojis || [] });
		}
	}, 300)

	getSlashCommands = debounce(async(keyword) => {
		const db = database.active;
		const commandsCollection = db.collections.get('slash_commands');
		const commands = await commandsCollection.query(
			Q.where('id', Q.like(`${ Q.sanitizeLikeString(keyword) }%`))
		).fetch();
		this.setState({ mentions: commands || [] });
	}, 300)

	focus = () => {
		if (this.component && this.component.focus) {
			this.component.focus();
		}
	}

	handleTyping = (isTyping) => {
		const { typing, rid, sharing } = this.props;
		if (sharing) {
			return;
		}
		if (!isTyping) {
			if (this.typingTimeout) {
				clearTimeout(this.typingTimeout);
				this.typingTimeout = false;
			}
			typing(rid, false);
			return;
		}

		if (this.typingTimeout) {
			return;
		}

		this.typingTimeout = setTimeout(() => {
			typing(rid, true);
			this.typingTimeout = false;
		}, 1000);
	}

	setCommandPreview = async(command, name, params) => {
		const { rid } = this.props;
		try	{
			const { success, preview } = await RocketChat.getCommandPreview(name, rid, params);
			if (success) {
				return this.setState({ commandPreview: preview?.items, showCommandPreview: true, command });
			}
		} catch (e) {
			log(e);
		}
		this.setState({ commandPreview: [], showCommandPreview: true, command: {} });
	}

	setInput = (text) => {
		this.text = text;
		if (this.component && this.component.setNativeProps) {
			this.component.setNativeProps({ text });
		}
	}

	setShowSend = (showSend) => {
		const { showSend: prevShowSend } = this.state;
		const { showSend: propShowSend } = this.props;
		if (prevShowSend !== showSend && !propShowSend) {
			this.setState({ showSend });
		}
	}

	clearInput = () => {
		this.setInput('');
		this.setShowSend(false);
	}

	canUploadFile = (file) => {
		const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props;
		const result = canUploadFile(file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize);
		if (result.success) {
			return true;
		}
		Alert.alert(I18n.t('Error_uploading'), I18n.t(result.error));
		return false;
	}

	takePhoto = async() => {
		try {
			const image = await ImagePicker.openCamera(this.imagePickerConfig);
			if (this.canUploadFile(image)) {
				this.openShareView([image]);
			}
		} catch (e) {
			// Do nothing
		}
	}

	takeVideo = async() => {
		try {
			const video = await ImagePicker.openCamera(this.videoPickerConfig);
			if (this.canUploadFile(video)) {
				this.openShareView([video]);
			}
		} catch (e) {
			// Do nothing
		}
	}

	chooseFromLibrary = async() => {
		try {
			const attachments = await ImagePicker.openPicker(this.libraryPickerConfig);
			this.openShareView(attachments);
		} catch (e) {
			// Do nothing
		}
	}

	chooseFile = async() => {
		try {
			const res = await DocumentPicker.pick({
				type: [DocumentPicker.types.allFiles]
			});
			const file = {
				filename: res.name,
				size: res.size,
				mime: res.type,
				path: res.uri
			};
			if (this.canUploadFile(file)) {
				this.openShareView([file]);
			}
		} catch (e) {
			if (!DocumentPicker.isCancel(e)) {
				log(e);
			}
		}
	}

	openShareView = (attachments) => {
		const { message, replyCancel, replyWithMention } = this.props;
		// Start a thread with an attachment
		let { thread } = this;
		if (replyWithMention) {
			thread = message;
			replyCancel();
		}
		Navigation.navigate('ShareView', { room: this.room, thread, attachments });
	}

	createDiscussion = () => {
		const { isMasterDetail } = this.props;
		const params = { channel: this.room, showCloseModal: true };
		if (isMasterDetail) {
			Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
		} else {
			Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
		}
	}

	showMessageBoxActions = () => {
		const { showActionSheet } = this.props;
		showActionSheet({ options: this.options });
	}

	editCancel = () => {
		const { editCancel } = this.props;
		editCancel();
		this.clearInput();
	}

	openEmoji = async() => {
		await this.setState({
			showEmojiKeyboard: true
		});
	}

	recordingCallback = (recording) => {
		this.setState({ recording });
	}

	finishAudioMessage = async(fileInfo) => {
		const {
			rid, tmid, baseUrl: server, user
		} = this.props;

		if (fileInfo) {
			try {
				if (this.canUploadFile(fileInfo)) {
					await RocketChat.sendFileMessage(rid, fileInfo, tmid, server, user);
				}
			} catch (e) {
				log(e);
			}
		}
	}

	closeEmoji = () => {
		this.setState({ showEmojiKeyboard: false });
	}

	submit = async() => {
		const {
			onSubmit, rid: roomId, tmid, showSend, sharing
		} = this.props;
		const message = this.text;

		// if sharing, only execute onSubmit prop
		if (sharing) {
			onSubmit(message);
			return;
		}

		this.clearInput();
		this.debouncedOnChangeText.stop();
		this.closeEmoji();
		this.stopTrackingMention();
		this.handleTyping(false);
		if (message.trim() === '' && !showSend) {
			return;
		}

		const {
			editing, replying, message: { id: messageTmid }, replyCancel
		} = this.props;

		// Slash command
		if (message[0] === MENTIONS_TRACKING_TYPE_COMMANDS) {
			const db = database.active;
			const commandsCollection = db.collections.get('slash_commands');
			const command = message.replace(/ .*/, '').slice(1);
			const slashCommand = await commandsCollection.query(
				Q.where('id', Q.like(`${ Q.sanitizeLikeString(command) }%`))
			).fetch();
			if (slashCommand.length > 0) {
				try {
					const messageWithoutCommand = message.replace(/([^\s]+)/, '').trim();
					const [{ appId }] = slashCommand;
					const triggerId = generateTriggerId(appId);
					RocketChat.runSlashCommand(command, roomId, messageWithoutCommand, triggerId, tmid || messageTmid);
					replyCancel();
				} catch (e) {
					log(e);
				}
				this.clearInput();
				return;
			}
		}
		// Edit
		if (editing) {
			const { message: editingMessage, editRequest } = this.props;
			const { id, subscription: { id: rid } } = editingMessage;
			editRequest({ id, msg: message, rid });

		// Reply
		} else if (replying) {
			const {
				message: replyingMessage, threadsEnabled, replyWithMention
			} = this.props;

			// Thread
			if (threadsEnabled && replyWithMention) {
				onSubmit(message, replyingMessage.id);

			// Legacy reply or quote (quote is a reply without mention)
			} else {
				const { user, roomType } = this.props;
				const permalink = await this.getPermalink(replyingMessage);
				let msg = `[ ](${ permalink }) `;

				// if original message wasn't sent by current user and neither from a direct room
				if (user.username !== replyingMessage.u.username && roomType !== 'd' && replyWithMention) {
					msg += `@${ replyingMessage.u.username } `;
				}

				msg = `${ msg } ${ message }`;
				onSubmit(msg);
			}
			replyCancel();

		// Normal message
		} else {
			onSubmit(message);
		}
	}

	updateMentions = (keyword, type) => {
		if (type === MENTIONS_TRACKING_TYPE_USERS) {
			this.getUsers(keyword);
		} else if (type === MENTIONS_TRACKING_TYPE_EMOJIS) {
			this.getEmojis(keyword);
		} else if (type === MENTIONS_TRACKING_TYPE_COMMANDS) {
			this.getSlashCommands(keyword);
		} else {
			this.getRooms(keyword);
		}
	}

	identifyMentionKeyword = (keyword, type) => {
		this.setState({
			showEmojiKeyboard: false,
			trackingType: type
		});
		this.updateMentions(keyword, type);
	}

	stopTrackingMention = () => {
		const { trackingType, showCommandPreview } = this.state;
		if (!trackingType && !showCommandPreview) {
			return;
		}
		this.setState({
			mentions: [],
			trackingType: '',
			commandPreview: [],
			showCommandPreview: false
		});
	}

	handleCommands = ({ event }) => {
		if (handleCommandTyping(event)) {
			if (this.focused) {
				Keyboard.dismiss();
			} else {
				this.component.focus();
			}
			this.focused = !this.focused;
		} else if (handleCommandSubmit(event)) {
			this.submit();
		} else if (handleCommandShowUpload(event)) {
			this.showMessageBoxActions();
		}
	}

	renderContent = () => {
		const {
			recording, showEmojiKeyboard, showSend, mentions, trackingType, commandPreview, showCommandPreview
		} = this.state;
		const {
			editing, message, replying, replyCancel, user, getCustomEmoji, theme, Message_AudioRecorderEnabled, children, isActionsEnabled
		} = this.props;

		const isAndroidTablet = isTablet && isAndroid ? {
			multiline: false,
			onSubmitEditing: this.submit,
			returnKeyType: 'send'
		} : {};

		const recordAudio = showSend || !Message_AudioRecorderEnabled ? null : (
			<RecordAudio
				theme={theme}
				recordingCallback={this.recordingCallback}
				onFinish={this.finishAudioMessage}
			/>
		);

		const commandsPreviewAndMentions = !recording ? (
			<>
				<CommandsPreview commandPreview={commandPreview} showCommandPreview={showCommandPreview} />
				<Mentions mentions={mentions} trackingType={trackingType} theme={theme} />
			</>
		) : null;

		const replyPreview = !recording ? (
			<ReplyPreview
				message={message}
				close={replyCancel}
				username={user.username}
				replying={replying}
				getCustomEmoji={getCustomEmoji}
				theme={theme}
			/>
		) : null;

		const textInputAndButtons = !recording ? (
			<>
				<LeftButtons
					theme={theme}
					showEmojiKeyboard={showEmojiKeyboard}
					editing={editing}
					showMessageBoxActions={this.showMessageBoxActions}
					editCancel={this.editCancel}
					openEmoji={this.openEmoji}
					closeEmoji={this.closeEmoji}
					isActionsEnabled={isActionsEnabled}
				/>
				<TextInput
					ref={component => this.component = component}
					style={styles.textBoxInput}
					returnKeyType='default'
					keyboardType='twitter'
					blurOnSubmit={false}
					placeholder={I18n.t('New_Message')}
					onChangeText={this.onChangeText}
					underlineColorAndroid='transparent'
					defaultValue=''
					multiline
					testID='messagebox-input'
					theme={theme}
					{...isAndroidTablet}
				/>
				<RightButtons
					theme={theme}
					showSend={showSend}
					submit={this.submit}
					showMessageBoxActions={this.showMessageBoxActions}
					isActionsEnabled={isActionsEnabled}
				/>
			</>
		) : null;

		return (
			<>
				{commandsPreviewAndMentions}
				<View style={[styles.composer, { borderTopColor: themes[theme].borderColor }]}>
					{replyPreview}
					<View
						style={[
							styles.textArea,
							{ backgroundColor: themes[theme].messageboxBackground },
							!recording && editing && { backgroundColor: themes[theme].chatComponentBackground }
						]}
						testID='messagebox'
					>
						{textInputAndButtons}
						{recordAudio}
					</View>
				</View>
				{children}
			</>
		);
	}

	render() {
		console.count(`${ this.constructor.name }.render calls`);
		const { showEmojiKeyboard } = this.state;
		const {
			user, baseUrl, theme, iOSScrollBehavior
		} = this.props;
		return (
			<MessageboxContext.Provider
				value={{
					user,
					baseUrl,
					onPressMention: this.onPressMention,
					onPressCommandPreview: this.onPressCommandPreview
				}}
			>
				<KeyboardAccessoryView
					ref={ref => this.tracking = ref}
					renderContent={this.renderContent}
					kbInputRef={this.component}
					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
					onKeyboardResigned={this.onKeyboardResigned}
					onItemSelected={this.onEmojiSelected}
					trackInteractive
					// revealKeyboardInteractive
					requiresSameParentToManageScrollView
					addBottomView
					bottomViewColor={themes[theme].messageboxBackground}
					iOSScrollBehavior={iOSScrollBehavior}
				/>
			</MessageboxContext.Provider>
		);
	}
}

const mapStateToProps = state => ({
	isMasterDetail: state.app.isMasterDetail,
	baseUrl: state.server.server,
	threadsEnabled: state.settings.Threads_enabled,
	user: getUserSelector(state),
	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize,
	Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled
});

const dispatchToProps = ({
	typing: (rid, status) => userTypingAction(rid, status)
});

export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));