import React from 'react';
import QueueAnim from 'rc-queue-anim';
import Datatable from './Datatable';
import FlatButton from 'material-ui/FlatButton';
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
import IconButton from 'material-ui/IconButton';
import ToolbarMessageComponent from './Toolbar';

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  state = {
    newMessages: [],
  }

  handleMessagesReceived = (Messages) => {
    if (Messages && Messages.length > 0) {
      this.setState(Object.assign(this.state, { newMessages: Messages }));
    }
  }

  render() {
    return (
      <section className="container-fluid with-maxwidth">
        <QueueAnim type="bottom" className="ui-animate">
          <div key="1"><h2 className="article-title">Message Center</h2>
            <ToolbarMessageComponent onMessagesReceived={this.handleMessagesReceived} />
            <Datatable MessageChange={this.state.newMessages} />
          </div>
        </QueueAnim>
      </section>
    );
  }
}

module.exports = Page;
