import React from "react";
import Icon from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
import NotificationBellDropdown from "./NotificationBellDropdown";
import { HeaderAlertType } from "../HeaderAlert";
const NotificationBell = (props) => {
    const { ref, isComponentVisible, setIsComponentVisible } = useComponentOutsideClick(false);
    const itemsWithCount = props.items.filter((item) => {
        return item.count > 0;
    });
    // Count items by type
    const criticalItemsCount = itemsWithCount.filter((item) => {
        return item.alertType === HeaderAlertType.ERROR;
    }).length;
    const successItemsCount = itemsWithCount.filter((item) => {
        return item.alertType === HeaderAlertType.SUCCESS;
    }).length;
    const infoItemsCount = itemsWithCount.filter((item) => {
        return item.alertType === HeaderAlertType.INFO;
    }).length;
    // Determine badge count and color based on priority: Critical > Success > Info
    let badgeCount = 0;
    let badgeColor = "bg-gray-500";
    if (criticalItemsCount > 0) {
        badgeCount = criticalItemsCount;
        badgeColor = "bg-red-500";
    }
    else if (successItemsCount > 0) {
        badgeCount = successItemsCount;
        badgeColor = "bg-emerald-500";
    }
    else if (infoItemsCount > 0) {
        badgeCount = infoItemsCount;
        badgeColor = "bg-gray-500";
    }
    return (React.createElement("div", { className: "relative ml-4 flex-shrink-0", ref: ref },
        React.createElement("button", { type: "button", className: "flex items-center justify-center h-9 w-9 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150", onClick: () => {
                setIsComponentVisible(!isComponentVisible);
            }, "aria-expanded": isComponentVisible, "aria-haspopup": "true" },
            React.createElement("span", { className: "sr-only" }, "View notifications"),
            React.createElement(Icon, { className: "h-5 w-5 text-gray-500", icon: IconProp.Bell })),
        badgeCount > 0 && (React.createElement("span", { className: `absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full ${badgeColor} text-xs font-semibold text-white ring-2 ring-white` }, badgeCount > 99 ? "99+" : badgeCount)),
        isComponentVisible && (React.createElement(NotificationBellDropdown, { items: props.items, onItemClick: (item) => {
                setIsComponentVisible(false);
                props.onItemClick(item);
            } }))));
};
export default NotificationBell;
//# sourceMappingURL=NotificationBell.js.map