import React, { FC } from 'react';
import { CSSTransition } from 'react-transition-group';
import { NotificationsProps } from './types';
import { NotificationItem } from './types';
import Notification from './Notification';
import classnames from 'classnames';

//Styles
import './notifications.scss';

const Notifications: FC<NotificationsProps> = ({
  notifications = [],
  onRequestHide = () => { },
  enterTimeout = 400,
  leaveTimeout = 400,
}) => {

  const handleRequestHide = (notification: NotificationItem) => () => {
    onRequestHide(notification);
  };

  const className = classnames('notification-gtc-rc-container', {
    'notification-gtc-rc-container-empty': notifications.length === 0,
  });

  return (
    <div className={className}>
      <CSSTransition
        classNames="notification-gtc-rc"
        timeout={{ enter: enterTimeout, exit: leaveTimeout }}
      >
        <>
          {
            notifications.map((notification) => {
              const key = notification.id || new Date().getTime();
              return (
                <Notification
                  key={key}
                  type={notification.type || ''}
                  title={notification.title}
                  message={notification.message}
                  timeOut={notification.timeOut}
                  onClick={notification.onClick}
                  onRequestHide={handleRequestHide(notification)}
                />
              )
            })
          }
        </>
      </CSSTransition>
    </div>
  );
};

export default Notifications;