import React from 'react';
import { Divider, Typography } from '@material-ui/core';
import { Message } from './Message';
import { Loading } from './Loading';

var MessageView = function MessageView(_ref) {
  var messages = _ref.messages,
      messagesEndRef = _ref.messagesEndRef,
      title = _ref.title,
      onMessageResend = _ref.onMessageResend,
      classes = _ref.classes,
      theme = _ref.theme,
      isLoading = _ref.isLoading;
  return React.createElement(React.Fragment, null, isLoading && React.createElement(Loading, null), messages.map(function (message, id) {
    return React.createElement(React.Fragment, null, (messages[id - 1] === undefined || messages[id - 1].at.split(' ')[0] !== message.at.split(' ')[0]) && React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    }, React.createElement(Divider, {
      variant: "middle",
      style: {
        flex: 1
      }
    }), React.createElement(Typography, {
      variant: "caption",
      className: classes.at
    }, message.at.split(' ')[0]), React.createElement(Divider, {
      variant: "middle",
      style: {
        flex: 1
      }
    })), React.createElement(Message, {
      title: title,
      onMessageResend: onMessageResend,
      classes: classes,
      message: message,
      addMessageName: messages[id - 1] === undefined || messages[id].own !== messages[id - 1].own || messages[id - 1].at.split(' ')[0] !== message.at.split(' ')[0],
      addMessageDate: messages[id + 1] === undefined || messages[id].own !== messages[id + 1].own || messages[id + 1].at.split(' ')[0] !== message.at.split(' ')[0],
      theme: theme,
      id: id
    }));
  }), React.createElement("div", {
    ref: messagesEndRef
  }));
};

export default MessageView;