import styled from "styled-components";
import React, { useRef } from "react";
import { useMedia, useToggle } from "react-use";
import { Drop, Flex, Icon, Pill, Text } from "@netdata/netdata-ui";
import { useSelector } from "../../../store/redux-separate-context";
import { selectLacksProtoBufSupport } from "../../../domains/global/selectors";
import Dropdown from "./dropdown";
const PillContainer = styled(Flex) `
  white-space: nowrap;
`;
const Link = styled(Text).attrs({ as: "a", color: "success", target: "_blank" }) ``;
const breakpoint = "(min-width: 1400px)";
const ProtoBuf = () => {
    const [isOpen, toggle] = useToggle();
    const lacksProtoBufSupport = useSelector(selectLacksProtoBufSupport);
    const ref = useRef();
    const isLargeEnough = useMedia(breakpoint);
    const close = () => {
        toggle(false);
    };
    if (!lacksProtoBufSupport)
        return null;
    return (React.createElement(Flex, { flex: false },
        React.createElement(PillContainer, { ref: ref },
            React.createElement(Pill, { "data-testid": "header-options-button", onClick: toggle, flavour: "warning", icon: "warning_triangle_hollow" }, isLargeEnough ? "NOT MONITORED IN CLOUD" : "")),
        ref.current && isOpen && (React.createElement(Drop, { target: ref.current, align: { top: "bottom", left: "left" }, onEsc: close, onClickOutside: close, animation: true },
            React.createElement(Dropdown, null,
                React.createElement(Flex, { background: "modalTabsBackground", padding: [4] },
                    React.createElement(Flex, { width: 14, flex: false, alignItems: "start" },
                        React.createElement(Flex, { padding: [2.5], round: "50%", background: "warningText" },
                            React.createElement(Icon, { color: "warningBackground", name: "informationPress" }))),
                    React.createElement(Flex, null,
                        React.createElement(Text, null,
                            "It will not be possible to monitor this node from Netdata Cloud after 1st of March. ",
                            React.createElement("br", null),
                            " ",
                            React.createElement("br", null),
                            "This node does not have proto-buf support. In order to learn how to apply proto-buf support to your nodes",
                            " ",
                            React.createElement(Link, { href: "https://www.netdata.cloud/blog/netdata-clouds-new-architecture" }, "read our documentation."),
                            React.createElement("br", null),
                            React.createElement("br", null),
                            " If you are not interested in monitoring this node from Netdata Cloud, you can",
                            " ",
                            React.createElement(Link, { href: "https://learn.netdata.cloud/docs/agent/claim#remove-and-reconnect-a-node" }, "unclaim it.")))))))));
};
export default ProtoBuf;
//# sourceMappingURL=index.js.map