// @flow
import React from 'react';
import { connect } from 'react-redux';
import { closeNotification } from 'actions/notifications';
import type { Notification } from 'actions/notifications';

class NotificationRow extends React.Component {
    props: {
        notification: Notification,
        onClose: (n: Notification) => void
    };
    render() {
        const { msg, level } = this.props.notification;
        let className = '';

        switch (level) {
            case 'danger':
                className = 'alert-danger';
                break;
            case 'success':
                className = 'alert-success';
                break;
            case 'warning':
                className = 'alert-warning';
                break;
        }

        return (
            <div
                className={`alert popup ${className} animated-show-hide`}
                role="alert"
                aria-live="assertive"
            >
                <span className="sr-only">{level}</span>
                <div className="container" dangerouslySetInnerHTML={{ __html: msg }} />
                <i
                    tabIndex="0"
                    aria-label="dismiss"
                    className="icon-close"
                    onClick={this.onClose}
                />
            </div>
        );
    }

    onClose = () => {
        this.props.onClose(this.props.notification);
    };
}

export class Notifications extends React.Component {
    props: {
        notifications: Notification[],
        closeNotification: (n: Notification) => void
    };
    render() {
        if (!this.props.notifications.length) {
            return null;
        }
        return (
            <div className="alerts-container">
                {this.props.notifications.map((n, i) =>
                    <NotificationRow
                        key={`${n.level}-${i}`}
                        notification={n}
                        onClose={this.props.closeNotification}
                    />
                )}
            </div>
        );
    }
}

const mapStateToProps = state => ({
    notifications: state.notifications
});

export default connect(mapStateToProps, { closeNotification })(Notifications);