// disable eslint below because the svg in the icon definition will error if React is not imported
import * as React from "react"; // eslint-disable-line
import useNotifications, { initializeCenterToggle } from "../../hooks/useNotifications";
import { useEffect, useState } from "react";
import BellIcon from "../shared/BellIcon";
import { FEAGlobals } from "../../../common/Globals";
import { getNotificationsPreferences } from "../userPreferences/components/content/notificationViews/notificationViewsUtils";
import { onClickA11y } from "../utils";
import glueFactory from "@interopio/desktop";
/**
 * This control is responsible for the toggling of the notifications drawer.
 *
 * @param {string} [className] - An optional CSS className to append.
 */
export const NotificationControl = ({ className, children }) => {
    const [glue, setGlue] = useState(null);
    const [lastVisibilityChange, setLastVisibilityChange] = useState(new Date());
    const { toggleCenter } = initializeCenterToggle();
    const onClick = () => {
        if (glue) {
            if (new Date().getTime() - lastVisibilityChange.getTime() > 250) {
                glue.notifications.panel.toggle();
            }
        }
        else {
            // Otherwise we're in legacy Finsemble so toggle the notification center
            toggleCenter();
        }
    };
    const { notifications, activeNotifications } = useNotifications({
        config: {
            // Get notification sent in previous session
            notificationsHistory: true,
        },
    });
    const [count, setCount] = useState(activeNotifications(notifications).length);
    const [showDotIcon, setShowDotIcon] = useState(true);
    const [showDotForMuted, setShowDotForMuted] = useState(false);
    useEffect(() => {
        // If running in iocd then set up the glue library
        if (window.glue42gd) {
            glueFactory().then((myGlue) => {
                var _a;
                setGlue(myGlue);
                (_a = myGlue.notifications.panel) === null || _a === void 0 ? void 0 : _a.onVisibilityChanged(() => {
                    // Because the panel has an "auto hide" capability, we need to make certain that we're not inadvertently closing and then reopening with clicks on the bell icon
                    setLastVisibilityChange(new Date());
                });
            });
        }
        getNotificationsPreferences().then((preferences) => {
            setShowDotIcon(!preferences.disableDotOnToolbarIcon);
            setShowDotForMuted(preferences.showDotOnToolbarIconForMutedNotifications);
        });
    }, []);
    useEffect(() => {
        async function computeDotIcon(error, response) {
            var _a, _b;
            if (error) {
                console.error("FinsembleUserPreferencesChannel: ", error);
            }
            else {
                const { data } = response;
                if ((_a = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("disableDotOnToolbarIcon")) {
                    setShowDotIcon(!data.notificationPreferences.disableDotOnToolbarIcon);
                }
                if ((_b = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _b === void 0 ? void 0 : _b.hasOwnProperty("showDotOnToolbarIconForMutedNotifications")) {
                    setShowDotForMuted(data.notificationPreferences.showDotOnToolbarIconForMutedNotifications);
                }
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", computeDotIcon);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", computeDotIcon);
        };
    }, []);
    useEffect(() => {
        let applyMuteFilterOverride = !showDotForMuted;
        setCount(activeNotifications(notifications, applyMuteFilterOverride).length);
    }, [notifications]);
    const wrapperClasses = `finsemble-toolbar-button icon-only ${className || ""}`.trim();
    return (React.createElement("div", { className: wrapperClasses, title: `Notification Control (${count})`, role: "button", ...onClickA11y(onClick) },
        showDotIcon && count > 0 && React.createElement("div", { className: "notification-alert-dot" }),
        children || React.createElement(BellIcon, null)));
};
//# sourceMappingURL=NotificationControl.js.map