var builder = require('focus').component.builder;
var React = require('react');
var type = require('focus').component.types;
var messageStore = require('focus').message.builtInStore();
var Message = require('../../message').component;
var assign = require('object-assign');

var messageCenterMixin = {
  getDefaultProps: function getCartridgeDefaultProps(){
    return {
      style: {}
    };
  },
  /** @inheriteddoc */
  getInitialState: function getCartridgeInitialState() {
    return this._getStateFromStore();
  },
  /** @inheriteddoc */
  componentWillMount: function cartridgeWillMount() {
    messageStore.addPushedMessageListener(this._handlePushMessage);
    messageStore.addClearMessagesListener(this._handleClearMessage);
  },
  /** @inheriteddoc */
  componentWillUnMount: function cartridgeWillUnMount(){
    messageStore.removePushedMessageListener(this._handlePushMessage);
    messageStore.removeClearMessagesListener(this._handleClearMessage);
  },
  _getStateFromStore: function getCartridgeStateFromStore(){
    return {messages: messageStore.getMessages() || {} };
  },
  _handlePushMessage: function _handlePushMessage(messageId){
    var messages = this.state.messages;
    messages[messageId] = messageStore.getMessage(messageId);
    this.setState({messages: messages});
  },
  _handleClearMessage: function _handleClearMessage(){
    this.setState({messages: {}});
  },
  _handleRemoveMessage: function _handleRemoveMessage(messageId){
    var msgs = this.state.messages;
    delete msgs[messageId];
    this.setState({messages: msgs});
  },
  renderMessages: function renderMessages(){
    var msgs = [];
    for(var msgKey in this.state.messages){
      msgs.push(React.createElement(Message, assign(this.state.messages[msgKey], {handleOnClick: this._handleRemoveMessage, key: msgKey})));
    }
    return msgs;
  },
  /** @inheriteddoc */
  render: function renderMessageCenter() {
    var className = `message-center ${this.props.style.className}`;
    return (
      <div className={className} data-focus='message-center'>
        {this.renderMessages()}
      </div>
    );
  }
};

module.exports = builder(messageCenterMixin);

@@ -267,16 +267,68 @@
 sign');%0A
+var capitalize = require('lodash/string/capitalize')
 %0Avar mes
@@ -416,16 +416,62 @@
 eturn %7B%0A
+      ttlInfo: 10000,%0A      ttlSuccess: 5000,%0A
       st
@@ -1779,46 +1779,95 @@
     
-msgs.push(React.createElement(Message,
+let msg = this.state.messages%5BmsgKey%5D;%0A      let ttlConf = %7B%7D;%0A      let messageProps =
  ass
@@ -1955,16 +1955,264 @@
 msgKey%7D)
+;%0A      if(msg.type === 'info' %7C%7C msg.type ==='success')%7B%0A        assign(messageProps, %7Bttl: this.props%5B%60ttl$%7Bcapitalize(msg.type)%7D%60%5D, handleTimeToLeave: this._handleRemoveMessage%7D);%0A      %7D%0A      msgs.push(React.createElement(Message, messageProps
 ));%0A    

Add the supression of info and loading message.