/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import * as React from "react";
import { FEAGlobals } from "../../../common/Globals";
export const LinkerGroupsDeprecated = () => {
    const [state, setState] = React.useState([]);
    const [labels, setLabels] = React.useState({});
    React.useEffect(() => {
        const cb = (err, response) => {
            if (Object.keys(labels).length === 0) {
                // Get the list of all channels, once, and then compute accessibility labels based on each channel's index
                // We do it here, upon receiving channels, because getAllChannels() is a synchronous function that only
                // returns data after the LinkerClient has been initialized.
                const channels = FEAGlobals.FSBL.Clients.LinkerClient.getAllChannels();
                let allLabels = {};
                channels.forEach((channel, index) => {
                    allLabels[channel.name] = index + 1;
                });
                setLabels(allLabels);
            }
            setState(response.channels);
        };
        // Get the current channel state for this app
        cb(null, FEAGlobals.FSBL.Clients.LinkerClient.getState());
        // And register for updates
        FEAGlobals.FSBL.Clients.LinkerClient.onStateChange(cb);
    }, []);
    return (React.createElement("div", { className: "linker-groups" }, state.map((channel) => {
        var _a, _b;
        return (React.createElement("div", { key: channel.name, className: `linker-group linker-group-accessible linker-${(_a = channel.label) !== null && _a !== void 0 ? _a : labels[channel.name]} ${channel.cssClassName}`, title: channel.name, style: { background: channel.color } }, (_b = channel.label) !== null && _b !== void 0 ? _b : labels[channel.name]));
    })));
};
//# sourceMappingURL=LinkerGroupsDeprecated.js.map