import React, { useCallback } from "react";
import { useSelector } from "react-redux";
import { createSelector } from "reselect";
import { Flex, Text, TextSmall, Collapsible, Button } from "@netdata/netdata-ui";
import { selectIsUsingGlobalRegistry, selectIsCloudEnabled } from "../../../domains/global/selectors";
import getNodes from "./nodes";
import ReplicatedNodes from "./replicatedNodes";
import SpacePanelIframe from "./spacePanelIframe";
import SignInPrompt from "./prompts/signIn";
import OfflinePrompt from "./prompts/offline";
const replicatedNodesSelector = createSelector(state => state.global.chartsMetadata.data || {}, state => state.global.registry.fullInfoPayload.mirrored_hosts_status || {}, ({ hosts, hostname }, hostsStatus) => getNodes(hosts, hostname, hostsStatus));
const visitedNodesSelector = createSelector(state => state.global.registry, registry => registry.registryMachinesArray || []);
const isSignedInSelector = createSelector(({ dashboard }) => dashboard, ({ isSignedIn, offline }) => ({ isSignedIn, offline }));
const Space = ({ isOpen, toggle }) => {
    const { parentNode = {}, replicatedNodes = [] } = useSelector(replicatedNodesSelector);
    const visitedNodes = useSelector(visitedNodesSelector);
    const globalRegistry = useSelector(selectIsUsingGlobalRegistry);
    const { isSignedIn, offline } = useSelector(isSignedInSelector);
    const cloudEnabled = useSelector(selectIsCloudEnabled);
    const switchIdentity = useCallback(() => window.switchRegistryModalHandler(), []);
    return (React.createElement(Collapsible, { width: 74, background: "panel", open: isOpen, direction: "horizontal", persist: true },
        React.createElement(Flex, { flex: true, column: true, overflow: { vertical: "hidden" }, margin: [3, 0, 0], border: { side: "left", color: "separator" }, style: { pointerEvents: "all" } },
            React.createElement(Flex, { overflow: { vertical: "auto" }, flex: true, column: true, gap: 4, padding: [4] },
                React.createElement(Flex, { alignSelf: "end" },
                    React.createElement(Button, { neutral: true, flavour: "borderless", themeType: "dark", small: true, icon: "chevron_left", onClick: toggle })),
                !isSignedIn && (React.createElement(React.Fragment, null,
                    !!replicatedNodes.length && (React.createElement(ReplicatedNodes, { parentNode: parentNode, replicatedNodes: replicatedNodes })),
                    !!visitedNodes.length && (React.createElement(Text, { strong: true, color: "border" }, "VisitedNodes")))),
                isSignedIn && (React.createElement(SpacePanelIframe, { parentNode: parentNode, replicatedNodes: replicatedNodes }))),
            globalRegistry && (React.createElement(Flex, { border: { side: "top" }, justifyContent: "center", alignItems: "center", padding: [6] },
                React.createElement(TextSmall, { onClick: switchIdentity }, "Switch Identity"))),
            !isSignedIn && cloudEnabled && React.createElement(SignInPrompt, null),
            offline && cloudEnabled && React.createElement(OfflinePrompt, null))));
};
export default React.memo(Space);
//# sourceMappingURL=index.js.map