content: import React from 'react';
  import { Link, browserHistory } from 'react-router';
  import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
  import FlatButton from 'material-ui/FlatButton';
  import styled from 'styled-components';
  import firebase from 'firebase';
  import LoadingIndicator from '../LoadingIndicator';
  
  
  var ReactDOM = require('react-dom');
  
  
  
  const ChatContentFrom = styled.div`
  position:relative;
  margin-top: 10px;
  float: right;
  clear: both;
  
  .speech-bubble {
  	position: relative;
  	background: #038c92;
  	border-radius: .4em;
    float: left;
    margin-right: 22px;
    padding: 10px 20px;
  
  
  &:after {
  	content: '';
  	position: absolute;
  	right: 0;
  	top: 50%;
  	width: 0;
  	height: 0;
  	border: 0.406em solid transparent;
  	border-left-color: #038c92;
  	border-right: 0;
  	margin-top: -0.406em;
  	margin-right: -0.406em;
  }
  }
  
  .msg {
    color: #fff;
    margin-bottom: 2px;
  }
  
  .user-name {
    color: #fff;
    fontSize: 11px;
    margin-bottom: 2px;
    margin-top: 5px;
  }
  
  `;
  
  const ChatContentTo = styled.div`
  position:relative;
  padding:10px 20px;
  float: left;
  clear: both;
  margin: 10px 0px;
  width: 100%;
  display: flex;
  opacity: 0.01;
  transition: opacity 300ms ease-in;
  
  .speech-bubble {
    width: 92%;
  	 position: relative;
      border-radius: 34px;
      border: 1px #ececec solid;
      float: right;
      padding: 10px 20px;
  }
  
  .msg {
    margin-bottom: 2px;
  }
  
  .user-name {
    fontSize: 11px;
    margin-bottom: 2px;
    margin-top: 5px;
  }
  `;
  
  const SendBox = styled.div`
  margin-top: 10px;
  clear: both;
  display: flex;
  border: 1px #ccc solid;
  padding: 10px;
  justify-content: space-between;
  z-index: 999999;
  
  #send {
  		background: #038c92;
      border-radius: 30px;
      padding: 3px 10px;
      color: #fff;
  }
  `;
  
  
  export default class ChatSiderBox extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        loading: true,
        text: ''
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    scrollToBottom = () => {
      const node = ReactDOM.findDOMNode(this.messagesEnd);
      node.scrollIntoView({ behavior: "smooth" });
    }
  
    componentDidMount() {
      this.scrollToBottom();
    }
  
    componentDidUpdate() {
      this.scrollToBottom();
    }
  
  
  
  	sendMsg() {
  		this.props.handleSubmit(this.props.msg['.userid'], this.state.text);
  		this.setState({
  			text: ''
  		});
  	}
  
    handleChange(event) {
     this.setState({text: event.target.value});
    }
  
    render() {
      if (!this.props.loading) {
      return (
        <div className="chat" id="chat" ref='email'>
          {this.props.msg.map((msg, i) => {
          if (msg.client) {
            return (<ChatContentFrom key={i} className="animated fadeIn">
            <img style={{width: '30px', height: '30px', marginTop: '14px', marginRight: '1em', float: 'right', borderRadius: '50%'}}
            src="https://plus.google.com/u/0/_/focus/photos/public/AIbEiAIAAABECND6k6O2gLWavQEiC3ZjYXJkX3Bob3RvKigyMjgzNGM2ZWZkYjJhZDZhZjI1YTI0MzQxYzJkYTRkODEzNDBhY2UyMAHQr8BxOTmI3m0dZJGY3Vj4osnP9g?sz=48" alt=""/>
            <div className="speech-bubble">
            <p className="msg">{msg.message}</p>
            <p className="user-name">{msg.user}</p>
            </div>
            </ChatContentFrom>
          );
        }
        else {
          return (<ChatContentTo key={i} className="animated fadeIn">
          <img style={{width: '30px', height: '30px', marginTop: '14px', marginRight: '1em', float: 'left', borderRadius: '50%'}}
          src="https://plus.google.com/u/0/_/focus/photos/public/AIbEiAIAAABECND6k6O2gLWavQEiC3ZjYXJkX3Bob3RvKigyMjgzNGM2ZWZkYjJhZDZhZjI1YTI0MzQxYzJkYTRkODEzNDBhY2UyMAHQr8BxOTmI3m0dZJGY3Vj4osnP9g?sz=48" alt=""/>
          <div className="speech-bubble">
          <p className="msg">{msg.message}</p>
          <p className="user-name">{msg.user}</p>
          </div>
          </ChatContentTo>
        );
        }
        })}
  			<SendBox>
  				<input type="text" id="chat_val" placeholder="Type here..." value={this.state.text} onChange={this.handleChange.bind(this)} />
  				<input type="submit" id="send" value="Submit" onClick={() => this.sendMsg()}/>
  			</SendBox>
        <div style={{ float:"left", clear: "both" }}
             ref={(el) => { this.messagesEnd = el; }} />
        </div>
      );
    }
    else {
      return (
        <LoadingIndicator/>
      )
    }
    }
  }
  