import React from "react";
import NotificationBellItem from "./NotificationBellItem";
import NotificationBellSection from "./NotificationBellSection";
import { HeaderAlertType } from "../HeaderAlert";
const NotificationBellDropdown = (props) => {
    const errorItems = props.items.filter((item) => {
        return item.alertType === HeaderAlertType.ERROR && item.count > 0;
    });
    const infoItems = props.items.filter((item) => {
        return item.alertType === HeaderAlertType.INFO && item.count > 0;
    });
    const successItems = props.items.filter((item) => {
        return item.alertType === HeaderAlertType.SUCCESS && item.count > 0;
    });
    const hasItems = errorItems.length > 0 || infoItems.length > 0 || successItems.length > 0;
    return (React.createElement("div", { className: "absolute right-0 z-10 mt-2 w-80 rounded-xl bg-white shadow-lg ring-1 ring-gray-200 max-h-96 overflow-y-auto" },
        React.createElement("div", { className: "py-2" },
            React.createElement("div", { className: "px-4 py-2 border-b border-gray-100" },
                React.createElement("span", { className: "text-sm font-semibold text-gray-900" }, "Notifications")),
            !hasItems && (React.createElement("div", { className: "px-4 py-6 text-center text-sm text-gray-500" }, "No notifications")),
            errorItems.length > 0 && (React.createElement(NotificationBellSection, { title: "Critical", alertType: HeaderAlertType.ERROR }, errorItems.map((item) => {
                return (React.createElement(NotificationBellItem, { key: item.id, item: item, onClick: () => {
                        props.onItemClick(item);
                    } }));
            }))),
            successItems.length > 0 && (React.createElement(NotificationBellSection, { title: "On-Call", alertType: HeaderAlertType.SUCCESS }, successItems.map((item) => {
                return (React.createElement(NotificationBellItem, { key: item.id, item: item, onClick: () => {
                        props.onItemClick(item);
                    } }));
            }))),
            infoItems.length > 0 && (React.createElement(NotificationBellSection, { title: "Information", alertType: HeaderAlertType.INFO }, infoItems.map((item) => {
                return (React.createElement(NotificationBellItem, { key: item.id, item: item, onClick: () => {
                        props.onItemClick(item);
                    } }));
            }))))));
};
export default NotificationBellDropdown;
//# sourceMappingURL=NotificationBellDropdown.js.map