text: /* eslint no-use-before-define: ["error", { "variables": false }], react-native/no-inline-styles: 0 */
  
  import PropTypes from 'prop-types';
  import React from 'react';
  import { View, ViewPropTypes, StyleSheet } from 'react-native';
  
  import Avatar from './Avatar';
  import Bubble from './Bubble';
  import SystemMessage from './SystemMessage';
  import Day from './Day';
  
  import { isSameUser, isSameDay } from './utils';
  
  export default class Message extends React.Component {
  	getInnerComponentProps() {
  		const { containerStyle, ...props } = this.props;
  		return {
  			...props,
  			isSameUser,
  			isSameDay
  		};
  	}
  
  	renderDay() {
  		if (this.props.currentMessage.createdAt) {
  			const dayProps = this.getInnerComponentProps();
  			if (this.props.renderDay) {
  				return this.props.renderDay(dayProps);
  			}
  			return <Day {...dayProps} />;
  		}
  		return null;
  	}
  
  	renderBubble() {
  		const bubbleProps = this.getInnerComponentProps();
  		if (this.props.renderBubble) {
  			return this.props.renderBubble(bubbleProps);
  		}
  		return <Bubble {...bubbleProps} />;
  	}
  
  	renderSystemMessage() {
  		const systemMessageProps = this.getInnerComponentProps();
  		if (this.props.renderSystemMessage) {
  			return this.props.renderSystemMessage(systemMessageProps);
  		}
  		return <SystemMessage {...systemMessageProps} />;
  	}
  
  	renderAvatar() {
  		if (this.props.user._id === this.props.currentMessage.user._id && !this.props.showUserAvatar) {
  			return null;
  		}
  		const avatarProps = this.getInnerComponentProps();
  		const { currentMessage } = avatarProps;
  		if (currentMessage.user.avatar === null) {
  			return null;
  		}
  		return null;
  	}
  
  	render() {
  		const sameUser = isSameUser(this.props.currentMessage, this.props.nextMessage);
  		return (
  			<View>
  				{this.renderDay()}
  				{this.props.currentMessage.system ? (
  					this.renderSystemMessage()
  				) : (
  					<View
  						style={[
  							styles[this.props.position].container,
  							{ marginBottom: sameUser ? 2 : 10 },
  							!this.props.inverted && { marginBottom: 2 },
  							this.props.containerStyle[this.props.position]
  						]}
  					>
  						{this.props.position === 'left' ? this.renderAvatar() : null}
  						{this.renderBubble()}
  						{this.props.position === 'right' ? this.renderAvatar() : null}
  					</View>
  				)}
  			</View>
  		);
  	}
  }
  
  const styles = {
  	left: StyleSheet.create({
  		container: {
  			flexDirection: 'row',
  			alignItems: 'flex-end',
  			justifyContent: 'flex-start',
  			marginLeft: 8,
  			marginRight: 0
  		}
  	}),
  	right: StyleSheet.create({
  		container: {
  			flexDirection: 'row',
  			alignItems: 'flex-end',
  			justifyContent: 'flex-end',
  			marginLeft: 0,
  			marginRight: 8
  		}
  	})
  };
  
  Message.defaultProps = {
  	lang: 'rus',
  	renderAvatar: undefined,
  	renderBubble: null,
  	renderDay: null,
  	renderSystemMessage: null,
  	position: 'left',
  	currentMessage: {},
  	nextMessage: {},
  	previousMessage: {},
  	user: {},
  	containerStyle: {},
  	showUserAvatar: true,
  	inverted: true
  };
  
  Message.propTypes = {
  	lang: PropTypes.string,
  	renderAvatar: PropTypes.func,
  	showUserAvatar: PropTypes.bool,
  	renderBubble: PropTypes.func,
  	renderDay: PropTypes.func,
  	renderSystemMessage: PropTypes.func,
  	position: PropTypes.oneOf(['left', 'right']),
  	currentMessage: PropTypes.object,
  	nextMessage: PropTypes.object,
  	previousMessage: PropTypes.object,
  	user: PropTypes.object,
  	inverted: PropTypes.bool,
  	containerStyle: PropTypes.shape({
  		left: ViewPropTypes.style,
  		right: ViewPropTypes.style
  	})
  };
  