/* eslint-disable arrow-body-style */
import React from "react";
import classNames from "classnames";
import { name2id } from "../../../../utils/name-2-id";
import truncateMiddle from "../../../../utils/truncateMiddle";
import { sortObjectByPriority } from "../../utils/sorting";
export const renderSingleMenu = ({ currentChart, handleScrollToId, menus, reportEvent, }) => (menuName) => {
    const menu = menus[menuName];
    const menuID = name2id(`menu_${menuName}`);
    const submenuNames = sortObjectByPriority(menu.submenus);
    const getEventName = (value) => {
        return value.startsWith("Kubernetes") ? "k8s" : value.replace(/[^\w]/g, "-").toLowerCase();
    };
    const onMenuClick = (event) => {
        handleScrollToId(event);
        reportEvent("metric-sidebar", `click-${getEventName(menu.title)}`);
    };
    const onSubmenuClick = (event, title) => {
        handleScrollToId(event);
        reportEvent("metric-sidebar", `click-${getEventName(menu.title)}`, getEventName(title));
    };
    // currentChart could be either just menu name "menu_ipv4"
    // or menu + submenu - "menu_ipv4_submenu_sockets"
    const isMenuActive = currentChart.startsWith(`${menuID}_submenu_`) || currentChart === menuID;
    return (React.createElement("li", { key: menuName, className: classNames("node-view__sidebar-menu-li", { "node-view__sidebar-menu-li--active": isMenuActive }) },
        React.createElement("a", { className: "node-view__sidebar-link", href: `#${menuID}`, onClick: onMenuClick, title: menu.title },
            React.createElement("span", { dangerouslySetInnerHTML: { __html: menu.icon } }),
            " ",
            truncateMiddle(menu.title, 30),
            menu.correlationsMetadata && (` (${menu.correlationsMetadata.scoredCount}/${menu.correlationsMetadata.totalCount})`)),
        React.createElement("ul", { className: classNames("node-view__sidebar-submenu") }, submenuNames.map((submenuName) => {
            const submenuID = name2id(`menu_${menuName}_submenu_${submenuName}`);
            const submenu = menu.submenus[submenuName];
            const isSubmenuActive = submenuID === currentChart;
            return (React.createElement("li", { key: submenuName, className: classNames("node-view__sidebar-submenu-li", { "node-view__sidebar-submenu-li--active": isSubmenuActive }) },
                React.createElement("a", { className: "node-view__sidebar-link", href: `#${submenuID}`, 
                    // @ts-ignore
                    onClick: (e) => onSubmenuClick(e, submenu.title) }, submenu.title)));
        }))));
};
//# sourceMappingURL=render-single-menu.js.map