import React, { useMemo } from "react";
import { ThemeProvider } from "styled-components";
import { createSelector } from "reselect";
import { useToggle } from "react-use";
import { Flex, Button, DarkTheme, Text, Layer } from "@netdata/netdata-ui";
import { useSelector } from "../../../store/redux-separate-context";
import { MenuItem } from "../../menus";
import SignOut from "../../auth/signOut";
import SignIn from "../../auth/signIn";
const SignInItem = () => {
    const onClick = (e, link) => {
        e.stopPropagation();
        window.open(link, "_blank", "noopener,noreferrer");
    };
    return (React.createElement(SignIn, { utmParameters: { content: "userSettings" } }, ({ isRegistry, link, onSignIn }) => (React.createElement(Text, { onClick: isRegistry ? e => onClick(e, link) : onSignIn }, "Sign in"))));
};
const isSignedInSelector = createSelector(({ dashboard }) => dashboard, ({ isSignedIn }) => isSignedIn);
const UserSettings = () => {
    const [isOpen, toggle] = useToggle();
    const signedIn = useSelector(isSignedInSelector);
    const menuItems = useMemo(() => [
        ...(signedIn
            ? [
                {
                    children: "Operational Status",
                    onClick: () => window.open("https://status.netdata.cloud", "_blank", "noopener,noreferrer"),
                },
            ]
            : []),
        ...(signedIn ? [{ separator: true }] : []),
        ...(signedIn
            ? [
                {
                    children: (React.createElement(SignOut, { "data-testid": "signout-button-sidebar", flavour: "borderless", height: { max: "18px" } })),
                },
            ]
            : [{ children: React.createElement(SignInItem, null) }]),
    ], [signedIn]);
    return (React.createElement(ThemeProvider, { theme: DarkTheme },
        React.createElement(Button, { "data-testid": "avatar-button-sidebar", flavour: "borderless", neutral: true, icon: "user", title: "User settings", name: "userSettings", onClick: toggle }),
        isOpen && (React.createElement(Layer, { position: "bottom-left", onClickOutside: toggle, onEsc: toggle, backdrop: false, margin: [5, 18] },
            React.createElement(Flex, { column: true, width: 52, background: "mainBackground", padding: [3], round: true }, menuItems.map((item, i) => {
                if (item.separator)
                    return React.createElement(Flex, { height: "1px", background: "disabled", key: i });
                return (React.createElement(MenuItem, Object.assign({ key: i, padding: [2, 4], round: 1 }, (item.onClick && { onClick: item.onClick })), item.children));
            }))))));
};
export default UserSettings;
//# sourceMappingURL=userSettings.js.map