import React, { useEffect, useState, FC } from 'react';
import NotificationManager from './NotificationManager';
import { NotificationContainerProps } from './types';
import Notifications from './Notifications';

const NotificationContainer: FC<NotificationContainerProps> = ({
  enterTimeout = 400,
  leaveTimeout = 400,
}) => {
  const [notifications, setNotifications] = useState([]);

  const handleStoreChange = (newNotifications: any) => {
    let currentNotifications: any = [...newNotifications]
    setNotifications(currentNotifications);
  };

  const handleRequestHide = (notification: any) => {
    NotificationManager.remove(notification);
  };

  useEffect(() => {
    NotificationManager.addChangeListener(handleStoreChange);
    return () => {
      NotificationManager.removeChangeListener(handleStoreChange);
    };
  }, []);

  return (
    <Notifications
      enterTimeout={enterTimeout}
      leaveTimeout={leaveTimeout}
      notifications={notifications}
      onRequestHide={handleRequestHide}
    />
  );
};

export default NotificationContainer;