import React from "react";
import { CollapsibleList, SimpleListItem } from "@rmwc/list";
import "@material/list/dist/mdc.list.css";
import "@rmwc/list/collapsible-list.css";
import "@rmwc/icon/icon.css";
import truncateMiddle from "../../../../utils/truncateMiddle";
import { naturalSortCompare } from "../../../../domains/dashboard/utils/sorting";
import { MASKED_DATA } from "../../../../domains/global/constants";
import { NodesContainer, ListItem, StyledIcon, ListHeaderContainer, NodeUrl, NodeName, TrashIcon, } from "./styled";
const Node = ({ name, alternateUrls, machineGuid, }) => (React.createElement(CollapsibleList, { handle: (React.createElement(SimpleListItem, { text: (React.createElement(React.Fragment, null,
            React.createElement(StyledIcon, { name: "node" }),
            React.createElement(NodeName, { href: "", onClick: (event) => {
                    event.preventDefault(); // prevent navigating to url
                    event.stopPropagation();
                    window.gotoServerModalHandler(machineGuid);
                } }, name))), metaIcon: alternateUrls.length && "chevron_right" })) }, alternateUrls.map((url) => (React.createElement(ListItem, { key: url },
    React.createElement(NodeUrl, { href: url }, truncateMiddle(url, 50)),
    React.createElement(TrashIcon, { name: "trashcan", size: "small", onClick: () => {
            window.deleteRegistryModalHandler(machineGuid, name, url);
        } }))))));
export const VisitedNodes = ({ machinesArray, }) => {
    const sortedMachines = machinesArray.sort((a, b) => naturalSortCompare(a.name, b.name))
        .filter(({ url }) => url !== MASKED_DATA);
    return (React.createElement(NodesContainer, null,
        React.createElement(CollapsibleList, { startOpen: true, handle: (React.createElement(ListHeaderContainer, null,
                React.createElement(SimpleListItem, { metaIcon: "chevron_right", text: "Visited Nodes" }))) }, sortedMachines.map(({ name, alternateUrls, guid, url, }) => (React.createElement(Node, { alternateUrls: alternateUrls, key: `${name}-${guid}`, machineGuid: guid, name: name, url: url }))))));
};
//# sourceMappingURL=visited-nodes.js.map