/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import * as React from "react";
import { useSelector } from "react-redux";
import { FEAGlobals } from "../../../common/Globals";
export const LinkerGroups = () => {
    var _a, _b, _c, _d;
    const state = useSelector((currentState) => currentState);
    const joinedChannels = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.clients) === null || _a === void 0 ? void 0 : _a[FEAGlobals.finsembleWindow.name]) === null || _b === void 0 ? void 0 : _b.joinedChannels) !== null && _c !== void 0 ? _c : [];
    const allChannels = (_d = state === null || state === void 0 ? void 0 : state.allChannels) !== null && _d !== void 0 ? _d : [];
    return (React.createElement("div", { className: "linker-groups" }, allChannels.map((channel) => {
        var _a;
        const active = joinedChannels.includes(channel.name);
        // linker-${channel.label} is deprecated in favor of cssClassName
        const label = (_a = channel.label) !== null && _a !== void 0 ? _a : "X";
        return (active && (React.createElement("div", { key: channel.name, className: `linker-group linker-group-accessible linker-${channel.label} ${channel.cssClassName}`, title: `Channel ${label}` }, label)));
    })));
};
//# sourceMappingURL=LinkerGroups.js.map