import React, { useContext, useEffect, useState } from "react";
// Context
import { NotificationsPreferencesContext } from "../../../NotificationsPreferencesContext";
// Components
import { Checkbox } from "../../../../common/Checkbox";
import DefaultDropdownButton from "../../../../shared/DefaultDropdownButton";
import ButtonRow from "../../../../common/ButtonRow";
// Utils
import { FEAGlobals } from "../../../../../../common/Globals";
import { getNotificationsPreferences, loadSources } from "./notificationViewsUtils";
const FINSEMBLE_NOTIFICATIONS_SERVICE_CONFIG_PATH = "finsemble.servicesConfig.notifications";
const NOTIFICATIONS_PREFERENCES_KEYS = {
    DISABLE_DOT_ON_TOOLBAR_ICON: "disableDotOnToolbarIcon",
    SHOW_DOT_ON_TOOLBAR_ICON_MUTED_NOTIFICATIONS: "showDotOnToolbarIconForMutedNotifications",
    INFORMATIONAL_NOTIFICATION_TOAST_PERIOD_SECONDS: "informationalNotificationToastPeriodSeconds",
    DEFAULT_SNOOZE_PERIOD_SECONDS: "defaultSnoozePeriodSeconds",
    NEW_NOTIFICATION_HALO_PERIOD_SECONDS: "newNotificationHaloPeriodSeconds",
};
const setAndTransmitPreferenceChange = (preferenceKey, value) => {
    FEAGlobals.FSBL.Clients.ConfigClient.setPreference({
        field: `${FINSEMBLE_NOTIFICATIONS_SERVICE_CONFIG_PATH}.${preferenceKey}`,
        value,
    }, (err) => {
        if (err) {
            FEAGlobals.FSBL.Clients.Logger.system.error(`Error setting preference from Notifications Preferences Home Component - preference: ${preferenceKey} - value: ${value} `, err);
        }
        else {
            FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
                notificationPreferences: {
                    [preferenceKey]: value,
                },
            });
        }
    });
};
const informationalToastDuration = [
    {
        optionLabel: "10 seconds",
        optionValue: 10,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.INFORMATIONAL_NOTIFICATION_TOAST_PERIOD_SECONDS, 10);
        },
    },
    {
        optionLabel: "30 seconds",
        optionValue: 30,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.INFORMATIONAL_NOTIFICATION_TOAST_PERIOD_SECONDS, 30);
        },
    },
    {
        optionLabel: "45 seconds",
        optionValue: 45,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.INFORMATIONAL_NOTIFICATION_TOAST_PERIOD_SECONDS, 45);
        },
    },
    {
        optionLabel: "60 seconds",
        optionValue: 60,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.INFORMATIONAL_NOTIFICATION_TOAST_PERIOD_SECONDS, 60);
        },
    },
];
const snoozeDuration = [
    {
        optionLabel: "5 minutes",
        optionValue: 300,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.DEFAULT_SNOOZE_PERIOD_SECONDS, 300);
        },
    },
    {
        optionLabel: "10 minutes",
        optionValue: 600,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.DEFAULT_SNOOZE_PERIOD_SECONDS, 600);
        },
    },
    {
        optionLabel: "20 minutes",
        optionValue: 1200,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.DEFAULT_SNOOZE_PERIOD_SECONDS, 1200);
        },
    },
    {
        optionLabel: "30 minutes",
        optionValue: 1800,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.DEFAULT_SNOOZE_PERIOD_SECONDS, 1800);
        },
    },
];
const newNotificationsHalo = [
    {
        optionLabel: "30 seconds",
        optionValue: 30,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.NEW_NOTIFICATION_HALO_PERIOD_SECONDS, 30);
        },
    },
    {
        optionLabel: "1 minute",
        optionValue: 60,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.NEW_NOTIFICATION_HALO_PERIOD_SECONDS, 60);
        },
    },
    {
        optionLabel: "3 minutes",
        optionValue: 180,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.NEW_NOTIFICATION_HALO_PERIOD_SECONDS, 180);
        },
    },
    {
        optionLabel: "5 minutes",
        optionValue: 600,
        clickHandler: () => {
            setAndTransmitPreferenceChange(NOTIFICATIONS_PREFERENCES_KEYS.NEW_NOTIFICATION_HALO_PERIOD_SECONDS, 600);
        },
    },
];
const NotificationsMainPreferences = () => {
    const notificationsPreferencesContext = useContext(NotificationsPreferencesContext);
    const { notificationSources, setNotificationSources, setSelectedNotificationSource, setCurrentNotificationsPreferencesView, } = notificationsPreferencesContext;
    const [reloadSources, setReloadSources] = useState(false);
    const [notificationPreferences, setNotificationPreferences] = useState({});
    useEffect(() => {
        getNotificationsPreferences().then((preferences) => {
            FEAGlobals.FSBL.Clients.Logger.info("NotificationsPreferencesHome", preferences);
            setNotificationPreferences(preferences);
        });
    }, []);
    useEffect(() => {
        function listenForRefreshEvent(error, response) {
            if (error) {
                console.error("FinsembleNotificationsPreferencesChannel: ", error);
            }
            else {
                const { data } = response;
                if (data === "notificationReceived") {
                    setReloadSources(true);
                }
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsPreferencesChannel", listenForRefreshEvent);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsPreferencesChannel", listenForRefreshEvent);
        };
    }, []);
    {
        notificationSources &&
            useEffect(() => {
                loadSources(setNotificationSources, setReloadSources);
            }, [notificationSources.length == 0, reloadSources]);
    }
    useEffect(() => {
        function navigateToSourceDetail(err, response) {
            const { data } = response;
            if (data.notification) {
                const selectedSource = notificationSources.find((source) => source.source === data.notification.source) || null;
                setSelectedNotificationSource(selectedSource);
                setCurrentNotificationsPreferencesView("Details");
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsNavigationChannel", navigateToSourceDetail);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsNavigationChannel", navigateToSourceDetail);
        };
    }, [notificationSources]);
    const toggleNotificationDot = () => {
        setNotificationPreferences((prevState) => {
            return {
                ...prevState,
                disableDotOnToolbarIcon: !notificationPreferences.disableDotOnToolbarIcon,
            };
        });
        setAndTransmitPreferenceChange("disableDotOnToolbarIcon", !notificationPreferences.disableDotOnToolbarIcon);
    };
    const toggleActionableNotificationToast = () => {
        setNotificationPreferences((prevState) => {
            return {
                ...prevState,
                toastTimeoutOnActionableNotifications: !notificationPreferences.toastTimeoutOnActionableNotifications,
            };
        });
        setAndTransmitPreferenceChange("toastTimeoutOnActionableNotifications", !notificationPreferences.toastTimeoutOnActionableNotifications);
    };
    const toggleNotificationDotForMutedNotifications = () => {
        setNotificationPreferences((prevState) => {
            return {
                ...prevState,
                showDotOnToolbarIconForMutedNotifications: !notificationPreferences.showDotOnToolbarIconForMutedNotifications,
            };
        });
        setAndTransmitPreferenceChange("showDotOnToolbarIconForMutedNotifications", !notificationPreferences.showDotOnToolbarIconForMutedNotifications);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "row-section" },
            React.createElement(ButtonRow, { label: "Notification sources", onClick: () => setCurrentNotificationsPreferencesView("Sources"), iconClass: "ff-caret-up rotate-90" })),
        React.createElement("div", { className: "row-section" },
            React.createElement(Checkbox, { onClick: toggleNotificationDot, checked: !notificationPreferences.disableDotOnToolbarIcon, label: "Show notification dot for new notifications" })),
        React.createElement("div", { className: "row-section" },
            React.createElement(Checkbox, { disabled: notificationPreferences.disableDotOnToolbarIcon, onClick: toggleNotificationDotForMutedNotifications, checked: notificationPreferences.showDotOnToolbarIconForMutedNotifications, label: "Show notification dot for notifications marked as \u201CDon\u2019t show\u201D" })),
        React.createElement("div", { className: "row-section", style: { paddingTop: "15px", paddingBottom: "15px" } },
            React.createElement(Checkbox, { onClick: toggleActionableNotificationToast, checked: notificationPreferences.toastTimeoutOnActionableNotifications, label: "Enable toast timeouts on actionable notifications" })),
        React.createElement("div", { className: "row-section" },
            React.createElement("span", { className: "row__lbl" }, "Toast times out after"),
            React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: informationalToastDuration.find((element) => element.optionValue === notificationPreferences.informationalNotificationToastPeriodSeconds), buttonOptions: informationalToastDuration })),
        React.createElement("div", { className: "row-section" },
            React.createElement("span", { className: "row__lbl" }, "Snooze for"),
            React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: snoozeDuration.find((element) => element.optionValue === notificationPreferences.defaultSnoozePeriodSeconds), buttonOptions: snoozeDuration })),
        React.createElement("div", { className: "row-section" },
            React.createElement("span", { className: "row__lbl" }, "Turn off the new notification halo after"),
            React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: newNotificationsHalo.find((element) => element.optionValue === notificationPreferences.newNotificationHaloPeriodSeconds), buttonOptions: newNotificationsHalo }))));
};
export default NotificationsMainPreferences;
//# sourceMappingURL=NotificationsPreferencesHome.js.map