import React from "react";
import PropTypes from "prop-types";
import { List } from "immutable";
import { connect } from "react-redux";

import { Notification } from "./notification";

const NotificationsConnected = ({ notifications }) => {
  return (
    <div className="notifications">
      {notifications.map((el) => (
        <Notification
          key={el.get("id")}
          id={el.get("id")}
          icon={el.get("icon", "video-camera")}
          title={el.get("title", "Notification")}
          message={el.get("message")}
          autohide={el.get("autohide", true)}
          delay={el.get("delay", 10000)}
          imageUrl={el.get("imageUrl")}
        />
      ))}
    </div>
  );
};
NotificationsConnected.propTypes = {
  notifications: PropTypes.instanceOf(List),
};

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

export const Notifications = connect(mapStateToProps)(NotificationsConnected);