import React, { useContext, useEffect, useState } from "react";
// Context
import { NotificationsPreferencesContext } from "../../../NotificationsPreferencesContext";
// Components
import BellIcon from "../../../../shared/BellIcon";
import BellIconCrossed from "../../../../shared/BellIconCrossed";
import { Button } from "../../../../common/Button";
import { FEAGlobals } from "../../../../../../common/Globals";
const renderTypes = (muteFilters, sourceTypes, setTypesMutedState) => sourceTypes.map((sourceType, index) => {
    const toggleMute = (type) => {
        const newState = [...sourceTypes].map((typeToUpdate) => {
            if (typeToUpdate.name === type) {
                const muteFilter = muteFilters.find((muteFilterItem) => muteFilterItem.type === typeToUpdate.name);
                if (!muteFilter) {
                    console.error(`Unable to find mute filter ${typeToUpdate.muted} for source`);
                }
                else {
                    let isMuted = false;
                    if (typeToUpdate.muted) {
                        FEAGlobals.FSBL.Clients.NotificationClient.unmute(muteFilter);
                    }
                    else {
                        FEAGlobals.FSBL.Clients.NotificationClient.mute(muteFilter);
                        isMuted = true;
                    }
                    FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleNotificationsMuteStateChannel", {
                        source: muteFilter.source,
                        type: muteFilter.type,
                        isMuted: isMuted,
                    });
                    typeToUpdate.muted = !typeToUpdate.muted;
                }
            }
            return typeToUpdate;
        });
        setTypesMutedState(newState);
    };
    return (React.createElement("div", { key: `${sourceType.name}__${index}`, className: "row-section" },
        React.createElement("div", { className: "row" },
            React.createElement("div", { className: "row__lbl" }, sourceType.name),
            React.createElement("div", { className: "row_right__icon", onClick: () => toggleMute(sourceType.name) }, sourceType.muted ? React.createElement(BellIconCrossed, null) : React.createElement(BellIcon, null)))));
});
const NotificationsSourceTypes = (context) => {
    const notificationsPreferencesContext = useContext(NotificationsPreferencesContext);
    const currentNotificationSource = notificationsPreferencesContext.selectedNotificationSource;
    const sourceTypes = (currentNotificationSource === null || currentNotificationSource === void 0 ? void 0 : currentNotificationSource.types.filter((type) => type.name !== "default")) || [];
    const muteFilters = sourceTypes.map((sourceType) => {
        const muteFilter = { type: sourceType.name };
        if (currentNotificationSource === null || currentNotificationSource === void 0 ? void 0 : currentNotificationSource.source) {
            muteFilter.source = currentNotificationSource.source;
        }
        return muteFilter;
    });
    const goBack = () => {
        notificationsPreferencesContext.setCurrentNotificationsPreferencesView("Sources");
    };
    const [typesMutedState, setTypesMutedState] = useState(sourceTypes);
    const [allMuted, setAllMuted] = useState(false);
    const toggleMuteAll = () => {
        let newTypesMutedState = [];
        if (allMuted) {
            newTypesMutedState = typesMutedState.map((sourceType) => {
                sourceType.muted = false;
                return sourceType;
            });
            FEAGlobals.FSBL.Clients.NotificationClient.unmute(muteFilters);
        }
        else {
            newTypesMutedState = typesMutedState.map((sourceType) => {
                sourceType.muted = true;
                return sourceType;
            });
            FEAGlobals.FSBL.Clients.NotificationClient.mute(muteFilters);
        }
        newTypesMutedState.forEach((element) => {
            FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleNotificationsMuteStateChannel", {
                source: currentNotificationSource === null || currentNotificationSource === void 0 ? void 0 : currentNotificationSource.source,
                type: element.name,
                isMuted: !allMuted,
            });
        });
        setTypesMutedState(newTypesMutedState);
        setAllMuted(!allMuted);
    };
    // Navigation Hook
    useEffect(() => {
        function listenForPreference(error, response) {
            if (error) {
                console.error("FinsembleUserPreferencesChannel: ", error);
            }
            else {
                const { data } = response;
                if (!data.notification) {
                    notificationsPreferencesContext.setCurrentNotificationsPreferencesView("Home");
                }
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreference);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreference);
        };
    }, []);
    useEffect(() => {
        function listenMuteStateChanged(error, response) {
            if (error) {
                console.error("FinsembleNotificationsMuteStateChannel: ", error);
            }
            else {
                const { data } = response;
                const newTypesMutedState = [...typesMutedState].map((muteState) => {
                    if (muteState.name !== data.type)
                        return muteState;
                    return { name: data.type, muted: data.isMuted };
                });
                setTypesMutedState(newTypesMutedState);
                setAllMuted(newTypesMutedState.every((sourceType) => sourceType.muted));
            }
        }
        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
        };
    }, []);
    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" }, JSON.stringify(notificationsPreferencesContext) === "{}" && context
                ? context.context.source
                : currentNotificationSource === null || currentNotificationSource === void 0 ? void 0 : currentNotificationSource.source),
            muteFilters.length > 0 ? (React.createElement(Button, { fashion: "primary", className: "accent-negative", text: allMuted ? "Show All" : "Don't Show All", onClick: toggleMuteAll, fixedSize: 110 })) : null),
        React.createElement("div", { className: "notification-sources__types" }, typesMutedState && typesMutedState.length > 0 ? (renderTypes(muteFilters, typesMutedState, setTypesMutedState)) : (React.createElement("div", { id: "no-source-types", className: "row-section" }, "No source types configured")))));
};
export default NotificationsSourceTypes;
//# sourceMappingURL=NotificationsSourceTypes.js.map