import React, { useContext, useEffect, useState } from "react";
import ButtonRow from "../../../../common/ButtonRow";
// Context
import { NotificationsPreferencesContext } from "../../../NotificationsPreferencesContext";
// Components
import { Button } from "../../../../common/Button";
// Utils
import { loadSources } from "./notificationViewsUtils";
import { FEAGlobals } from "../../../../../../common/Globals";
const NotificationSourceRowButton = ({ source }) => {
    const notificationsPreferencesContext = useContext(NotificationsPreferencesContext);
    const { setSelectedNotificationSource, setCurrentNotificationsPreferencesView } = notificationsPreferencesContext;
    const [showDefaultIcon] = useState(!source.icon);
    return (React.createElement("div", { className: "row-section" },
        React.createElement(ButtonRow, { onClick: () => {
                setSelectedNotificationSource(source);
                setCurrentNotificationsPreferencesView("Details");
            }, label: source.source, img: source.icon, showDefaultIcon: showDefaultIcon, iconClass: "ff-caret-up rotate-90" })));
};
const NotificationsSourcesPreferences = ({ context }) => {
    const notificationsPreferencesContext = useContext(NotificationsPreferencesContext);
    let { notificationSources, setNotificationSources, setSelectedNotificationSource, setCurrentNotificationsPreferencesView, } = notificationsPreferencesContext;
    if (JSON.stringify(notificationsPreferencesContext) === "{}" && context) {
        notificationSources = context;
    }
    const [reloadSources, setReloadSources] = useState(false);
    useEffect(() => {
        function listenForPreference(error, response) {
            if (error) {
                console.error("FinsembleNotificationsNavigationChannel: ", error);
            }
            else {
                const { data } = response;
                if (!data.notification) {
                    setCurrentNotificationsPreferencesView("Home");
                }
                else {
                    const selectedSource = notificationSources.find((source) => source.source === data.notification.source) || null;
                    setSelectedNotificationSource(selectedSource);
                    setCurrentNotificationsPreferencesView("Details");
                }
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsNavigationChannel", listenForPreference);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsNavigationChannel", listenForPreference);
        };
    }, []);
    useEffect(() => {
        loadSources(setNotificationSources, setReloadSources);
    }, [reloadSources]);
    useEffect(() => {
        async 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);
        };
    }, []);
    const goBack = () => {
        setCurrentNotificationsPreferencesView("Home");
    };
    return (React.createElement("div", { className: "notification-sources__container" },
        React.createElement("div", { className: "notification-sources__header" },
            React.createElement("div", { style: { paddingRight: 8, marginLeft: -3 } },
                React.createElement(Button, { onClick: () => goBack(), fashion: "primary", iconBefore: "chevron-left", text: "", className: "back-button" })),
            React.createElement("span", { className: "heading-larger" }, "Notification sources")),
        React.createElement("div", { className: "notification-sources__list" }, notificationSources && notificationSources.length > 0 ? (notificationSources.map((source, index) => React.createElement(NotificationSourceRowButton, { key: index, source: source }))) : (React.createElement("span", { id: "no-notification-sources" }, "No notification sources to display")))));
};
export default NotificationsSourcesPreferences;
//# sourceMappingURL=NotificationsSourcesPreferences.js.map