import React, { FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDoorOpen } from '@fortawesome/free-solid-svg-icons'

import { setNotificationAuto, removeNotification } from '../actions/notifications'
import { getNotifications } from '../selectors'

import Notification from './notification'

const NotificationContainer: FC = () => {
    const notifications = useSelector(getNotifications)
    const dispatch = useDispatch()

    const setAuto = (id: string) => {
        dispatch(setNotificationAuto(id))
    }

    const dismiss = (id: string) => {
        dispatch(removeNotification(id))
    }

    return (
        <div className="notification-container">
            {notifications.map(notification => {
                const content = () => {
                    switch (notification.type) {
                        case 'welcome':
                            return (
                                <p>
                                    <span className="icon">
                                        <FontAwesomeIcon icon={faDoorOpen} />
                                    </span>
                                    &nbsp;&nbsp;
                                    <span>{notification.content}</span>
                                </p>
                            )
                        default:
                            return <span>{notification.content}</span>
                    }
                }

                return (
                    <Notification
                        key={notification.id}
                        id={notification.id}
                        type={notification.type}
                        auto={notification.auto}
                        setAuto={setAuto}
                        dismiss={dismiss}>
                        {content()}
                    </Notification>
                )
            })}
        </div>
    )
}

export default NotificationContainer