import React from "react";
import { connect } from "redux-bundler-react";
import NotificationQuadrant from "./notification-quadrant";

const NotificationPane = (props) => {
  const { notifications } = props;
  let tl = [];
  let bl = [];
  let br = [];
  let tr = [];

  Object.keys(notifications).forEach((uid) => {
    switch (notifications[uid].position) {
      case "tl":
        tl.push(notifications[uid]);
        break;
      case "bl":
        bl.push(notifications[uid]);
        break;
      case "br":
        br.push(notifications[uid]);
        break;
      default:
        tr.push(notifications[uid]);
    }
  });

  return (
    <>
      <NotificationQuadrant items={tl} quad="top-left" />
      <NotificationQuadrant items={bl} quad="bottom-left" />
      <NotificationQuadrant items={tr} quad="top-right" />
      <NotificationQuadrant items={br} quad="bottom-right" />
    </>
  );
};
export default connect("selectNotifications", NotificationPane);
