import React, { useState, useCallback, useMemo } from "react";
import styled from "styled-components";
import { Flex, Text, Icon, TextInput } from "@netdata/netdata-ui";
import { MenuList } from "../../../menus";
import Anchor from "./anchor";
import Node from "./node";
const Search = styled(TextInput) `
  & > label {
    margin-bottom: 0;
  }
`;
const StyledIcon = styled(Icon) `
  transform: ${({ right }) => (right ? "rotate(270deg)" : "none")};
`;
const ReplicatedNodes = ({ parentNode, replicatedNodes }) => {
    const [listOpen, setListOpen] = useState(true);
    const [value, setValue] = useState("");
    const toggleListOpen = useCallback(() => setListOpen(o => !o), []);
    const onChange = useCallback(e => setValue(e.target.value), []);
    const nodes = useMemo(() => {
        if (!value)
            return replicatedNodes;
        return replicatedNodes.filter(({ hostname }) => hostname.toLowerCase().includes(value.toLowerCase()));
    }, [replicatedNodes, value]);
    return (React.createElement(MenuList, { isOpen: listOpen, toggleOpen: toggleListOpen, label: React.createElement(Flex, { alignItems: "center", justifyContent: "between" },
            React.createElement(Text, { strong: true, color: "border" }, "Replicated nodes"),
            React.createElement(StyledIcon, { right: !listOpen, name: "chevron_down", size: "small", color: "text" })) },
        React.createElement(Flex, { column: true, gap: 4, padding: [4, 0, 0] },
            React.createElement(Anchor, { as: "a", href: parentNode.url, justifyContent: "start" },
                React.createElement(Icon, { name: "nodes", size: "small", color: "bright" }),
                React.createElement(Text, { color: "bright" }, parentNode.hostname)),
            nodes.length >= 5 && (React.createElement(Flex, { padding: [0, 0, 0, 2] },
                React.createElement(Search, { value: value, onChange: onChange, iconLeft: React.createElement(Icon, { name: "search_s", size: "small", color: "text" }), metaShrinked: true }))),
            React.createElement(Flex, { column: true, gap: 2 }, nodes.map(({ hostname, url, status }) => (React.createElement(Node, { key: hostname, hostname: hostname, url: url, status: status })))))));
};
export default ReplicatedNodes;
//# sourceMappingURL=index.js.map