import React from "react";
import { useSelector } from "react-redux";
import { Flex, Button, Documentation } from "@netdata/netdata-ui";
import { selectIsCloudEnabled } from "../../../domains/global/selectors";
import ExpandButton from "./expandButton";
import UserSettings from "./userSettings";
import SpacesSkeleton from "./spacesSkeleton";
import SpacesIframe from "./spacesIframe";
import NetdataLogo from "../netdataLogo";
const Spaces = ({ isOpen, toggle, isSignedIn }) => {
    const cloudEnabled = useSelector(selectIsCloudEnabled);
    return (React.createElement(Flex, { column: true, justifyContent: "between", background: "panel", padding: [3, 0], width: "64px", alignItems: "center", gap: 6, position: "relative", overflow: "hidden" },
        React.createElement(Flex, { column: true, gap: 4, alignItems: "center", height: "100%", overflow: "hidden" },
            React.createElement(NetdataLogo, { width: 32, height: 32 }),
            !isOpen && (React.createElement(ExpandButton, { icon: "chevron_right_s", onClick: toggle, small: true, neutral: true, flavour: "borderless", themeType: "dark" })),
            cloudEnabled && isSignedIn && React.createElement(SpacesIframe, null),
            cloudEnabled && !isSignedIn && React.createElement(SpacesSkeleton, null)),
        React.createElement(Flex, { column: true, gap: 4, alignItems: "center" },
            React.createElement(Documentation, { app: "agent" }, toggle => (React.createElement(Button, { flavour: "borderless", neutral: true, themeType: "dark", className: "btn", icon: "question", onClick: toggle, title: "Need help?" }))),
            React.createElement(Button, { flavour: "borderless", neutral: true, themeType: "dark", className: "btn", "data-toggle": "modal", "data-target": "#optionsModal", icon: "gear", title: "Settings" }),
            cloudEnabled && React.createElement(UserSettings, null))));
};
export default Spaces;
//# sourceMappingURL=index.js.map