import React, { useContext, useEffect, useState } from "react";
import ContextMenuToggle from "../../../../common/ContextMenu";
import { NotificationsContext } from "../../../notificationsContext";
import { formatDistanceToNow } from "date-fns";
import { FEAGlobals } from "../../../../../../common/Globals";
import { markNotificationsRead, markNotificationsUnread, snoozeNotifications, } from "../../../../../hooks/useNotifications";
// Icons
import EnvelopeCloseIcon from "../../../../notifications/icons/EnvelopeClose";
import EnvelopeOpenIcon from "../../../../notifications/icons/EnvelopeOpen";
import SnoozeIcon from "../../../../notifications/icons/SnoozeIcon";
import IconButton from "../IconButton";
export const getDefaultContextMenuActions = () => {
    return {
        MARK_AS_UNREAD: {
            name: "MARK_AS_UNREAD",
            icon: React.createElement(EnvelopeCloseIcon, null),
            label: "Mark Unread",
            action: (notification) => markNotificationsUnread([notification]),
            display: true,
        },
        MARK_AS_READ: {
            name: "MARK_AS_READ",
            icon: React.createElement(EnvelopeOpenIcon, null),
            label: "Mark Read",
            action: (notification) => markNotificationsRead([notification]),
            display: true,
        },
        SNOOZE: {
            name: "SNOOZE",
            icon: React.createElement(SnoozeIcon, null),
            label: "Snooze",
            action: (notification) => snoozeNotifications([notification]),
            display: true,
        },
        DISMISS: {
            name: "DISMISS",
            icon: (React.createElement("div", { className: "finsemble-icon" },
                React.createElement("i", { className: "ff-close" }))),
            label: "Dismiss",
            action: () => {
                // Empty - filled in later
            },
            display: true,
        },
        SETTINGS: {
            name: "SETTINGS",
            icon: (React.createElement("div", { className: "finsemble-icon" },
                React.createElement("i", { className: "ff-settings" }))),
            label: "Settings",
            action: (notification) => {
                FEAGlobals.FSBL.Clients.LauncherClient.showWindow({
                    componentType: "UserPreferences",
                }, {
                    monitor: "mine",
                    left: "center",
                    top: "center",
                }, () => {
                    FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
                        preferencesTab: "Notifications",
                        notification,
                    });
                    // we need this timeout otherwise the UserPreferences screen does not detect the message being transmited
                    setTimeout(() => {
                        FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleNotificationsNavigationChannel", {
                            notification,
                        });
                    }, 50);
                });
            },
            display: true,
        },
        DETAILS: {
            name: "DETAILS",
            icon: (React.createElement("div", { className: "finsemble-icon" },
                React.createElement("i", { className: "ff-dots-horz" }))),
            label: "Details",
            action: () => {
                // Empty - filled in later
            },
            display: true,
        },
    };
};
export const NotificationCardHeaderControls = ({ notification, removeNotification, uiContext = "center", }) => {
    const notificationsContext = useContext(NotificationsContext);
    const { setSelectedNotification, muteFilters } = notificationsContext;
    const [isMuteFilterApplied, setIsMuteFilterApplied] = useState(muteFilters
        ? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)
        : false);
    const [time, setTime] = useState(formatDistanceToNow(new Date(notification.issuedAt), {
        includeSeconds: true,
    }));
    useEffect(() => {
        var _a;
        const id = setInterval(() => {
            setTime(formatDistanceToNow(new Date(notification.issuedAt), {
                includeSeconds: true,
            }));
        }, 60000);
        // when running unit tests in node.js, node does not exit until timeouts and intervals are done
        // Calling this allows node to exit without waiting for setInterval to complete.
        (_a = id.unref) === null || _a === void 0 ? void 0 : _a.call(id);
        return () => clearInterval(id);
    });
    const renderContextMenu = () => {
        const overFlowActions = getDefaultContextMenuActions();
        delete overFlowActions.DISMISS;
        if (uiContext === "center") {
            overFlowActions.DETAILS.action = (contextNotification) => {
                setSelectedNotification(contextNotification);
            };
        }
        else {
            delete overFlowActions.MARK_AS_READ;
            delete overFlowActions.MARK_AS_UNREAD;
            delete overFlowActions.DETAILS;
        }
        // Don't display read if notification is read
        if (overFlowActions.MARK_AS_READ)
            overFlowActions.MARK_AS_READ.display = !notification.isRead;
        // Don't display unread if notification is unread
        if (overFlowActions.MARK_AS_UNREAD)
            overFlowActions.MARK_AS_UNREAD.display = !!notification.isRead;
        return (React.createElement(ContextMenuToggle, { menuActions: overFlowActions, message: notification, isMuteFilterApplied: isMuteFilterApplied }));
    };
    useEffect(() => {
        function listenMuteStateChanged(error, response) {
            if (error) {
                console.error("FinsembleNotificationsMuteStateChannel: ", error);
                FEAGlobals.FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
            }
            else {
                const { data } = response;
                if (notification.source === data.source && notification.type === data.type) {
                    setIsMuteFilterApplied(data.isMuted);
                }
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
        };
    }, []);
    const optionsToggleClassName = uiContext === "center" ? "notification-card__more-options__toggle" : "notification-card__more-options__no-toggle";
    return (React.createElement("div", { className: optionsToggleClassName },
        React.createElement("span", { className: "notification-card_context_menu" }, renderContextMenu()),
        uiContext == "toasts" && (React.createElement(IconButton, { iconName: "ff-close", classNames: "notification-card__dismiss no-hover", tooltip: "Dismiss", clickHandler: removeNotification })),
        uiContext == "center" && React.createElement("span", { className: "notification-card_timestamp" }, time)));
};
//# sourceMappingURL=NotificationCardHeaderControls.js.map