import React, {Component} from 'react';
import {connect} from 'react-redux';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';
import {destroyMessage} from '../../actions/notification/notificationActions';
import './notificationBox.css';

class NotificationBox extends Component {

    render() {
        const {messages} = this.props;
        const messagesJson = messages && messages.messageJson;
        const messageObject = messages && messages.messageObj;

        if (messagesJson && messagesJson.length) {
            messagesJson.forEach(messageObj => {
                let messageTranslated = (messageObject && messageObject[messageObj.message]) ? messageObject[messageObj.message] : messageObj.message;
                messageTranslated += messageObj.key ? ' ' + messageObj.key : '';
                toast[messageObj.code](messageTranslated);
                this.props.dispatch(destroyMessage());
            })
        }
        return (
            <div>
                <ToastContainer className="generic-banner-box" position="top-right"
                    autoClose={5000}
                    hideProgressBar={false}
                    newestOnTop={true}
                    closeOnClick={true}
                    pauseOnHover={true}/>
            </div>
        );
    }
}

export default connect()(NotificationBox);
