import React, { useState, useEffect } from "react";
import { parseISO, differenceInMilliseconds, addSeconds } from "date-fns";
import { isNewNotification, isReNotification, getMostRecentAction } from "../../utils";
import { NotificationCardHeaderShell } from "./notificationCard/NotificationCardHeaderShell";
import { NotificationCardBodyShell } from "./notificationCard/NotificationCardBodyShell";
import { ErrorBoundary } from "../../../common/ErrorBoundary";
import { FEAGlobals } from "../../../../../common";
import "../../css/notification-card.css";
export const NotificationCardShell = ({ notification, uiContext = "center", removeNotification, children, }) => {
    const { isRead } = notification;
    const [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);
    const [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));
    const [componentUnmounted, setComponentUnmounted] = useState(false);
    const [wokeFromSnooze, setWokeFromSnooze] = useState(isReNotification(notification, newNotificationHaloPeriodSeconds));
    if (uiContext == "center") {
        // Sets the current default preference
        useEffect(() => {
            const getNotificationsPreferences = async () => {
                var _a;
                const preferences = await FEAGlobals.FSBL.Clients.NotificationClient.getPreferences();
                const haloPeriod = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.newNotificationHaloPeriodSeconds) !== null && _a !== void 0 ? _a : 0;
                setNotificationHaloPeriodSeconds(haloPeriod);
                if (!componentUnmounted) {
                    setIsNew(isNewNotification(notification, haloPeriod));
                }
            };
            if (!componentUnmounted) {
                getNotificationsPreferences();
            }
            return () => {
                setComponentUnmounted(true);
            };
        }, []);
        // Listens for preferences change
        useEffect(() => {
            function listenForPreferenceChange(error, response) {
                var _a, _b;
                if (error) {
                    console.error("FinsembleUserPreferencesChannel: ", error);
                    FEAGlobals.FSBL.Clients.Logger.system.error("FinsembleUserPreferencesChannel: ", error);
                }
                else {
                    const { data } = response;
                    setNotificationHaloPeriodSeconds((_b = (_a = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _a === void 0 ? void 0 : _a.newNotificationHaloPeriodSeconds) !== null && _b !== void 0 ? _b : 0);
                }
            }
            FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
            return () => {
                FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
            };
        }, []);
        useEffect(() => {
            let isRenotificationTimerId;
            if (isReNotification(notification, newNotificationHaloPeriodSeconds)) {
                const mostRecentAction = getMostRecentAction(notification);
                if (mostRecentAction) {
                    setWokeFromSnooze(true);
                    isRenotificationTimerId = setTimeout(() => {
                        setWokeFromSnooze(false);
                    }, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));
                }
            }
            else {
                setWokeFromSnooze(false);
                clearTimeout(isRenotificationTimerId);
            }
            return () => {
                clearTimeout(isRenotificationTimerId);
            };
        }, [newNotificationHaloPeriodSeconds, notification]);
    }
    useEffect(() => {
        let isNewTimerId;
        if (isNew) {
            if (notification.isRead) {
                setIsNew(false);
                clearTimeout(isNewTimerId);
            }
            else {
                isNewTimerId = setTimeout(() => {
                    setIsNew(false);
                }, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));
            }
        }
        return () => {
            clearTimeout(isNewTimerId);
        };
    }, [isNew, notification]);
    return (React.createElement("div", { className: `notification-card ${isRead ? "read" : ""} ${isNew || wokeFromSnooze ? "new" : ""} 
			${notification.cssClassName ? notification.cssClassName : ""} js-${uiContext}` }, children ? (React.createElement(ErrorBoundary, null, children)) : (React.createElement(React.Fragment, null,
        React.createElement(NotificationCardHeaderShell, { notification: notification, removeNotification: removeNotification, uiContext: uiContext }),
        React.createElement(NotificationCardBodyShell, { notification: notification })))));
};
//# sourceMappingURL=NotificationCardShell.js.map