"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertStatusPanel = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const AdaptableContext_1 = require("../AdaptableContext");
const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
const StatusBarPanel_1 = require("../StatusBar/StatusBarPanel");
const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
const initialStyle = { color: '', background: '' };
const AlertStatusPanel = () => {
    const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
    const [style, setStyle] = React.useState(initialStyle);
    const module = adaptableApi.internalApi
        .getModuleService()
        .getModuleById(ModuleConstants.AlertModuleId);
    const statusbarHighlightDuration = adaptableApi.optionsApi.getAlertOptions().statusbarHighlightDuration;
    /**
     * Using a selector to so the component updates each time an alert is triggered.
     */
    const alerts = (0, react_redux_1.useSelector)((state) => state.Internal.AdaptableAlerts);
    const text = alerts.length == 0 ? '0 Alerts' : alerts.length == 1 ? '1 Alert' : alerts.length + ' Alerts';
    const handleAction = React.useCallback(() => adaptableApi.alertApi.openAlertSettingsPanel(), []);
    // blinking logic
    const previousAlerts = React.useRef(alerts);
    const timeoutId = React.useRef(null);
    React.useEffect(() => {
        const noNewAlerts = previousAlerts.current.length === alerts.length;
        previousAlerts.current = alerts;
        if (!alerts.length) {
            return;
        }
        if (noNewAlerts) {
            return;
        }
        const { color, background } = (0, getAlertButtonStyle_1.getAlertButtonStyle)(alerts);
        setStyle({ color, background });
        if (timeoutId.current) {
            clearTimeout(timeoutId.current);
            timeoutId.current = null;
        }
        /**
         * Cannot clear timeout in the useEffect cleanup function, because this logic is not
         * called for each case. e.g. it is skipped for when alerts are not added.
         */
        timeoutId.current = setTimeout(() => {
            setStyle(initialStyle);
        }, statusbarHighlightDuration);
    }, [alerts]);
    let alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, color: style.color, backgroundColor: style.background, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
};
exports.AlertStatusPanel = AlertStatusPanel;
