import React, { Component } from 'react';
import toastr from 'react-toastr';
import { connect } from 'react-redux';
import _ from 'lodash';

import * as NotificationActions from './NotificationActions';

let {ToastContainer} = toastr;
let ToastMessageFactory = React.createFactory(toastr.ToastMessage.jQuery);

class Notification extends Component {

    constructor(props) {
        super(props);
        this.addAlert = this.addAlert.bind(this);
    }

    componentWillReceiveProps(nextprops) {
        if (this.props.notification.message != nextprops.notification.message &&
            nextprops.notification.message != "") {
            this.addAlert(nextprops.notification);
            this.props.dispatch(NotificationActions.resetNotification());
        }
    }

    render() {
        return (
            <ToastContainer toastMessageFactory={ToastMessageFactory} ref="container"
                                className="toast-container toast-bottom-right"/>
        );
    }

    addAlert(message) {
        this.refs.container.success(
            message.message,
            message.title,
            {
                timeOut: 3000,
                extendedTimeOut: 1000
            }
        );

    }

}

function mapStateToProps(state) {
    return {
        notification: state.app.data.notification
    };
}

export default connect(mapStateToProps)(Notification);