"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InboundDependencies = void 0;
const tslib_1 = require("tslib");
const json_1 = require("@stoplight/json");
const types_1 = require("@stoplight/types");
const ui_kit_1 = require("@stoplight/ui-kit");
const ScrollList_1 = require("@stoplight/ui-kit/ScrollList");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const React = tslib_1.__importStar(require("react"));
const constants_1 = require("../../constants");
const Provider_1 = require("../../containers/Provider");
const NodeDialog_1 = require("./NodeDialog");
exports.InboundDependencies = React.memo(({ edges, nodeType, className }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const edgesByNodeType = lodash_1.groupBy(lodash_1.uniqBy(edges, 'fromBranchNodeId'), 'fromBranchNodeType');
    const firstTab = edges.length ? lodash_1.findKey(edgesByNodeType, nodes => nodes === null || nodes === void 0 ? void 0 : nodes.length) : undefined;
    const [selectedTabId, setSelectedTabId] = React.useState();
    const onChangeTab = React.useCallback((newTabId, prevTabId, e) => {
        e.preventDefault();
        e.stopPropagation();
        setSelectedTabId(newTabId);
    }, [setSelectedTabId]);
    return (React.createElement("div", { className: classnames_1.default(className, 'InboundDependencies') },
        React.createElement(ui_kit_1.Tabs, { id: "InboundDependencies-tabs", className: "border rounded dark:border-darken-3", selectedTabId: selectedTabId !== null && selectedTabId !== void 0 ? selectedTabId : `InboundDependencies-${firstTab}`, onChange: onChangeTab, renderActiveTabPanelOnly: true, vertical: true },
            React.createElement(ui_kit_1.Tab, { id: `InboundDependencies-${types_1.NodeType.Model}`, title: React.createElement("div", { className: "flex items-center" },
                    React.createElement(ui_kit_1.Icon, { className: "mr-2", icon: constants_1.NodeTypeIcons[types_1.NodeType.Model], iconSize: 14 }),
                    constants_1.NodeTypePrettyName[types_1.NodeType.Model],
                    "s (",
                    ((_a = edgesByNodeType[types_1.NodeType.Model]) === null || _a === void 0 ? void 0 : _a.length) || 0,
                    ")"), panel: ((_b = edgesByNodeType[types_1.NodeType.Model]) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(DependencyTable, { className: `InboundDependencies__DependencyTable`, edges: edgesByNodeType[types_1.NodeType.Model] })) : (React.createElement("div", { className: "flex justify-center items-center h-full" },
                    "There are no ",
                    constants_1.NodeTypePrettyName[types_1.NodeType.Model],
                    "s that depend on this ",
                    constants_1.NodeTypePrettyName[nodeType])), panelClassName: "w-full" }),
            React.createElement(ui_kit_1.Tab, { id: `InboundDependencies-${types_1.NodeType.HttpService}`, title: React.createElement("div", { className: "flex items-center" },
                    React.createElement(ui_kit_1.Icon, { className: "mr-2", icon: constants_1.NodeTypeIcons[types_1.NodeType.HttpService], iconSize: 14 }),
                    constants_1.NodeTypePrettyName[types_1.NodeType.HttpService],
                    "s (",
                    ((_c = edgesByNodeType[types_1.NodeType.HttpService]) === null || _c === void 0 ? void 0 : _c.length) || 0,
                    ")"), panel: ((_d = edgesByNodeType[types_1.NodeType.HttpService]) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(DependencyTable, { className: `InboundDependencies__DependencyTable`, edges: edgesByNodeType[types_1.NodeType.HttpService] })) : (React.createElement("div", { className: "flex justify-center items-center h-full" },
                    "There are no ",
                    constants_1.NodeTypePrettyName[types_1.NodeType.HttpService],
                    "s that depend on this",
                    ' ',
                    constants_1.NodeTypePrettyName[nodeType])), panelClassName: "w-full" }),
            React.createElement(ui_kit_1.Tab, { id: `InboundDependencies-${types_1.NodeType.HttpOperation}`, title: React.createElement("div", { className: "flex items-center" },
                    React.createElement(ui_kit_1.Icon, { className: "mr-2", icon: constants_1.NodeTypeIcons[types_1.NodeType.HttpOperation], iconSize: 14 }),
                    constants_1.NodeTypePrettyName[types_1.NodeType.HttpOperation],
                    "s (",
                    ((_e = edgesByNodeType[types_1.NodeType.HttpOperation]) === null || _e === void 0 ? void 0 : _e.length) || 0,
                    ")"), panel: ((_f = edgesByNodeType[types_1.NodeType.HttpOperation]) === null || _f === void 0 ? void 0 : _f.length) ? (React.createElement(DependencyTable, { className: `InboundDependencies__DependencyTable`, edges: edgesByNodeType[types_1.NodeType.HttpOperation] })) : (React.createElement("div", { className: "flex justify-center items-center h-full" },
                    "There are no ",
                    constants_1.NodeTypePrettyName[types_1.NodeType.HttpOperation],
                    "s that depend on this",
                    ' ',
                    constants_1.NodeTypePrettyName[nodeType])), panelClassName: "w-full" }),
            React.createElement(ui_kit_1.Tab, { id: `InboundDependencies-${types_1.NodeType.Article}`, title: React.createElement("div", { className: "flex items-center" },
                    React.createElement(ui_kit_1.Icon, { className: "mr-2", icon: constants_1.NodeTypeIcons[types_1.NodeType.Article], iconSize: 14 }),
                    constants_1.NodeTypePrettyName[types_1.NodeType.Article],
                    "s (",
                    ((_g = edgesByNodeType[types_1.NodeType.Article]) === null || _g === void 0 ? void 0 : _g.length) || 0,
                    ")"), panel: ((_h = edgesByNodeType[types_1.NodeType.Article]) === null || _h === void 0 ? void 0 : _h.length) ? (React.createElement(DependencyTable, { className: `InboundDependencies__DependencyTable`, edges: edgesByNodeType[types_1.NodeType.Article] })) : (React.createElement("div", { className: "flex justify-center items-center h-full" },
                    "There are no ",
                    constants_1.NodeTypePrettyName[types_1.NodeType.Article],
                    "s that depend on this ",
                    constants_1.NodeTypePrettyName[nodeType])), panelClassName: "w-full" }))));
});
const DependencyTable = ({ className, edges = [] }) => {
    const info = React.useContext(Provider_1.ActiveInfoContext);
    const [activeNode, setActiveNode] = React.useState();
    const listProps = {
        itemData: { edges: lodash_1.sortBy(edges, 'uri') },
        itemSize: 60,
        maxRows: 10,
        itemCount: edges.length,
        height: '100%',
        width: '100%',
    };
    return (React.createElement("div", { className: classnames_1.default('h-full', className) },
        React.createElement(ScrollList_1.FixedSizeList, Object.assign({}, listProps), ({ style, index, data }) => {
            const edge = data.edges[index];
            let subtitle = edge.fromBranchNodeUri;
            if (edge.fromBranchNodeType === types_1.NodeType.HttpOperation) {
                const parts = edge.fromBranchNodeUri.split('/paths/')[1].split('/');
                const method = parts.slice(-1)[0];
                const path = parts.slice(0, parts.length);
                subtitle = `${lodash_1.toUpper(method)} ${json_1.decodePointerFragment(path.join('/'))}`;
            }
            return (React.createElement("div", { key: index, style: style },
                React.createElement("div", { className: classnames_1.default('relative h-full flex flex-col justify-center px-4 hover:bg-gray-2 dark-hover:bg-lighten-3 cursor-pointer', {
                        'border-t dark:border-darken-3': index > 0,
                        'bg-gray-1 dark:bg-lighten-2': index % 2,
                    }), onClick: () => setActiveNode(edge) },
                    React.createElement("div", { className: "flex items-center" },
                        React.createElement("div", { className: "font-medium" }, edge.fromBranchNodeName),
                        edge.fromBranchNodeVersion !== '0.0' && (React.createElement("div", { className: "px-2 text-sm text-gray-6" },
                            "v",
                            edge.fromBranchNodeVersion)),
                        React.createElement("div", { className: "flex-1" }),
                        React.createElement("div", { className: "text-sm opacity-75 text-gray-6" }, info.project)),
                    React.createElement("div", { className: "flex items-center opacity-75" },
                        React.createElement("div", { className: "flex-1 text-sm truncate text-gray-6", title: subtitle }, subtitle)))));
        }),
        React.createElement(NodeDialog_1.NodeDialog, { direction: "from", edge: activeNode, onClose: () => setActiveNode(undefined) })));
};
//# sourceMappingURL=Inbound.js.map