import * as React from 'react'
import { connect } from 'react-redux'
import { hideNotification } from '../actions'
import { getNotifications } from '../selectors'
import { Icon } from '../../icon'
import { Row } from '../../flex'
import { Text } from '../../text'
import { Notification } from './notification'
import { NotificationRootProps, NotificationRootComponentProps } from '../interfaces'

const styles = require('../../../../src/components/notifications/web/notifications.scss')

export class _NotificationRoot extends React.Component<NotificationRootComponentProps, {}> {

    public static defaultProps = {
        showAll: true,
        max: 5,
    }

    public render() {
        const { showAll, notifications, max } = this.props

        // none to display
        if (!notifications || !notifications.length) return null

        // either show all the notifications or just the first one
        const list = showAll ? notifications : [notifications[0]]

        return (
            <div className={styles.root}>
                {list.slice(0, max).map(notification =>
                    <Notification key={notification.id} notification={notification} />,
                )}
            </div>
        )
    }
}

const mapStateToProps = (state: any, ownProps: NotificationRootProps) => ({
    notifications:  getNotifications(state),
})

const mapActionsToProps = {}

export const NotificationRoot = connect(mapStateToProps, mapActionsToProps)(_NotificationRoot)